HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 – 无法在Safari中呈现SVG图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
正如标题所述,我有一个svg图像,但我无法在safari和opera中呈现它.但它在Firefox中运行得非常好.我找到了这篇文章

Doctype problem displaying SVG with Safari

已提到将内容更改为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)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62)" points="58,39,66,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)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,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文件添加

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

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

问题解决了!

本图文内容来源于网友网络收集整理提供,作为学习参使用,版权属于原作者。

大佬总结

以上是大佬教程为你收集整理的html5 – 无法在Safari中呈现SVG图像全部内容,希望文章能够帮你解决html5 – 无法在Safari中呈现SVG图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。