Html 无法在 Safari 中渲染 SVG 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12012573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not able to render SVG image in Safari
提问by SandBag_1996
As the title states, I have a svg image, but I am not able to render it in safari, and opera. But it works perfectly fine in Firefox. I found this post
正如标题所述，我有一个 svg 图像，但我无法在 safari 和歌剧中渲染它。但它在 Firefox 中运行良好。我找到了这个帖子
Doctype problem displaying SVG with Safari
which has mentioned to change the content to xhtml. So, I added this on the top of my html page,
其中提到将内容更改为 xhtml。所以，我在我的 html 页面的顶部添加了这个，
<meta http-equiv="Content-Type" content="application/xhtml+xml">
But still it doesn't work.
但它仍然不起作用。
I am embedding the svg image in my JS file like this
我像这样将 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>';
Can this be the reason? I am not calling it by conventional mechanism.
这可能是原因吗？我不是通过传统机制调用它。
I am also pasting the svg code here,
我也在这里粘贴 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"
values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
</circle>
<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="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
</g>
</svg>
Can anyone suggest the problem?
任何人都可以提出问题吗？
采纳答案by SandBag_1996
For future users: Found the reason to the problem. The accepted answer of this post Safari embeded SVG doctypeexplains the problem.
对于未来的用户：找到问题的原因。这篇文章的公认答案Safari embeded SVG doctype解释了这个问题。
Solution to the problem :
问题的解决方法：
Besides above, I configured my web.config file to add
除了上面，我配置了我的 web.config 文件来添加
<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>
The server should send correct Content-Type header.
服务器应发送正确的 Content-Type 标头。
Problem solved! :)
问题解决了！:)
回答by Eric Norcross
I recently ran into this problem and discovered that because my polygons were self terminating, Safari 6.0.2 wouldn't render them. E.G.:
我最近遇到了这个问题，发现因为我的多边形是自终止的，Safari 6.0.2 不会渲染它们。例如：
Doesn't work:
不起作用：
<polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'>
Works:
作品：
<polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'/>
