10

タイトルが示すように、私は svg 画像を持っていますが、サファリやオペラでレンダリングできません。しかし、Firefox では問題なく動作します。この投稿を見つけました

Safari で SVG を表示する場合の Doctype の問題

これは、コンテンツを 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>

誰でも問題を提案できますか?

4

2 に答える 2

6

将来のユーザー向け: 問題の理由が見つかりました。この投稿Safari 埋め込み SVG doctypeの受け入れられた回答は、問題を説明しています。

問題の解決策:

上記に加えて、web.configファイルを追加するように構成しました

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

サーバーは正しい Content-Type ヘッダーを送信する必要があります。

問題が解決しました！:)

于 2012-08-18T00:12:36.097 に答える
0

私は最近この問題に遭遇し、ポリゴンが自己終了するため、Safari 6.0.2 がそれらをレンダリングしないことを発見しました。例えば：

動作しません:

<polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'>

作品:

<polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'/>
于 2013-03-21T22:29:52.497 に答える