html - 无法在 Safari 中渲染 SVG 图像

Question

如标题所述，我有一张 svg 图像，但我无法在 Safari 和 Opera 中渲染它。但它在 Firefox 中工作得很好。我找到了这篇文章

Doctype problem displaying SVG with Safari

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

<meta http-equiv="Content-Type" content="application/xhtml+xml">

但是还是不行。

我像这样在我的 JS 文件中嵌入 svg 图像

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

谁能提出问题？

Answer 1

对于 future 的用户:找到了问题的原因。这篇文章的接受答案Safari embeded SVG doctype解释问题。

问题解决方案:

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

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

服务器应该发送正确的 Content-Type header 。

问题解决了! :)