我应该使用<img>,<object>或<embed>加载SVG文件到一个页面类似于加载的方式jpg,gif还是png？
每个代码的代码是什么,以确保它尽可能地工作？(我在我的研究中看到了包括mimetype或指向后备SVG渲染器的参考,并没有看到一个很好的最新参考).
假设我正在检查与Modernizr的 SVG支持,并<img>为不支持SVG的浏览器退回(可能用普通标签替换).
Safari浏览器(我在windows下测试)似乎在显示Svg Image元素时遇到问题.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<img src="image.svg" />
</body>
</html>
这是image.svg的内容:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
是否有任何解决方案或解决方法可以在Safari中使用它？
正如标题所述,我有一个svg图像,但我无法在safari和opera中呈现它.但它在Firefox中运行得非常好.我找到了这篇文章
已提到将内容更改为xhtml.所以,我在html页面的顶部添加了这个,
<meta http-equiv="Content-Type" content="application/xhtml+xml">
但它仍然无效.
我正在将svg图像嵌入到我的JS文件中
this.my_object.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow" x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
这可能是原因吗？我不是通过传统机制来称呼它.
我也在这里粘贴svg代码,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g name="gauge" width="122px" height="127px">
<image xlink:href="gauging.png" width="122" height="127"/>
<circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
<animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s" …我在Illustrator中创建了一个简单的多边形,然后在图像前面创建了一个剪切路径(蒙版).我已将其导出为SVG文件,并在Chrome和Safari中完美呈现.
但是,当我使用SVG数据创建HTML文件时,它在Chrome中完美呈现,而不是 Safari 6.0.2.
不太清楚我可能做错了什么; 我已经创建了SVG示例(个人站点)和HTML(jsfiddle上的示例)的示例.
