在我的网站内,我正在嵌入一些svgs.它们似乎在Chrome,Firefox,IE(9+)和Safari中都运行良好.一旦svg中包含图像,safari就不会渲染图像.
基于之前的类似主题,我尝试了以下内容:
<use>
像这样的标签 <use></use>
SVG图像不会出现在Safari中 - 我没有发现这非常有用,因为这是删除svg的aprt.
无法在Safari中渲染SVG图像 - 已添加
<meta http-equiv="Content-Type" content="application/xhtml+xml"> 在标题中.
除此之外,我真的不知道还有什么可以尝试.也许还有一点需要注意的是,在我的页面中,图像没有显示,但我可以在safari中打开svg文件(只是文件),它将被正确渲染.此外,在浏览器中将其作为文件打开后,它也会在页面内部呈现.我将svg嵌入到带有img标签的页面中.
<img src="mysvg.svg" class="center-block"/>
这是我的svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
<defs>
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/>
</defs>
<clipPath id="SVGID_2_"> …我正在一个网站上工作,我正在使用SVG片段文件,并通过CSS背景图像加载特定的SVG.
我也有一个PNG后备和我使用的是下面作为作为工作基础: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background -图片
例
.ico-arrow-right {
background: url(ico-arrow-right.png);
background: url(sprite-collection.svg#arrowright),
linear-gradient(transparent, transparent);
}
问题是,它似乎在大多数浏览器上运行良好,但在桌面和IOS浏览器的Safari中,SVG不会出现,只显示一个空格.考虑到这一点,似乎设备上的Safari/webkit,在使用CSS背景图像时不喜欢SVG片段精灵.
有没有解决方案/解决这个问题？我还是想用CSS背景图像中的PNG/SVG拉,不希望恢复使用单独的SVG文件,有超过60个svgs,我不希望所有这些服务器的请求!
谢谢大家
我必须为Firefox添加一个embed标记,或者使用JavaScript添加Internet Explorer的对象标记,以根据浏览器寻址相应的ActiveX /插件.插件可能会丢失,在这种情况下需要下载.动态添加的Firefox嵌入标记按预期工作.Internet Explorer的动态添加对象标记似乎什么都不做.object标签需要以下属性才能正常运行.
id ="SomeId"
classid = "CLSID:{GUID}"
codebase = "http://www.MyActicexSource.com/MyCuteActivex.CAB#Version=2,0,0,1"
即使是一般的工作理念或方法也会很好.
谢谢!
我创建了一个使用 raphaeljs 库绘制各种 SVG 元素的页面，但我在 Safari 中遇到了一些问题。
我正在绘制图像并使用剪切路径来掩盖某些区域。然后，用户可以点击这些图像“浏览”到放置在后面的其他图像。
这在 Firefox 和 Chrome 甚至 IE 中都能正常工作。但在 Safari 中我无法点击浏览图像。剪切路径似乎在 Safari 中不起作用。
我通过这个问题发现Safari 的内容类型必须设置为“application/xhtml+xml”，因为它不使用 html5 解析器。
我已经尝试过将其放在页面顶部的建议......
<?php
header('Content-type: application/xhtml+xml');
?>
...但是浏览器只输出 html 文件。
我只是想知道我需要什么文档类型才能使 safari 正确绘制嵌入 SVG，例如 chrome 和 firefox？
这就是我绘制 SVG 图像的方式，它在 chrome 和 firefox 中运行良好
function myDraw(path, url, x, y, w, h, id){
//create clipPath Element
var clippath = document.createElementNS("http://www.w3.org/2000/svg","clipPath");
clippath.setAttribute("id", id);
svgcanv.appendChild(clippath);
//draw the path
var cp=paper.path(path).translate(x, y).attr({stroke: 0});
$(cp.node).appendTo('#'+id+'');
//assoc clipPath with image
var img = paper.image(url,x,y,w,h);//.attr({fill:"#111",opacity:0.7}); …我有几个我想在页面上布局的SVG图像.Firefox和Chrome没有给我任何问题,但当且仅当文档具有".xhtml"扩展名时,Safari才会显示SVG图像.如果我尝试使用PHP代码(以及".php"扩展名),我在".xhtml"文档中使用的完全相同的标记将不再显示SVG图像.问题当然是,我必须使用PHP来完成手头的项目.有什么建议？这是源代码:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="de" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title>SVG Safari Test</title>
</head>
<body>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><circle cx="250" cy="250" r="238.048"/></svg>
</body>
</html>
svg ×4
safari ×3
css ×2
php ×2
clipping ×1
doctype ×1
dynamic-data ×1
html ×1
javascript ×1
object-tag ×1
sprite ×1
sprite-sheet ×1
xhtml ×1