无法在 Safari 中渲染 SVG 图像 [英] Not able to render SVG image in Safari

问题描述

正如标题所述，我有一个 svg 图像，但我无法在 safari 和歌剧中渲染它.但它在 Firefox 中运行良好.我找到了这个帖子

使用 Safari 显示 SVG 的文档类型问题

其中提到将内容更改为 xhtml.所以，我在我的 html 页面的顶部添加了这个，

但是还是不行.

我像这样将 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><textid="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"values="none;#f88;#f00;#f88;none;"repeatCount="0"/></圆圈><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: 无"/><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>

谁能提出这个问题?

解决方案

对于未来的用户:找到问题的原因了.这篇文章的公认答案 Safari embeded SVG doctype 解释了这个问题.>

问题的解决方法:

除此之外，我配置了我的 web.config 文件以添加

服务器应该发送正确的 Content-Type 标头.

问题解决了！:)

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

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,

<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

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 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?

解决方案

For future users: Found the reason to the problem. The accepted answer of this post Safari embeded SVG doctype explains the problem.

Solution to the problem :

Besides above, I configured my web.config file to add

<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>

The server should send correct Content-Type header.

Problem solved! :)

这篇关于无法在 Safari 中渲染 SVG 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！