0

javascriptを使用してsvg画像をレンダリングしようとしています。さまざまなオプションを試しましたが、最終的にこれに解決する必要があります。

このようにhtmlでオブジェクトIDを宣言しました

<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>

今、私はjavascriptを介してこのgauge.svgにアクセスしようとしています。このような埋め込みタイプの要素を作成しました

this.m_svg = document.createElement('embed');

aand を使用setAttributeしてイメージにアクセスしようとしましたが、成功しませんでした。助言がありますか？

また、ここに画像とともにsvgコードを貼り付けます。

画像: https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg 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>

PS：すでにこれを試しました.m_svg.innerHTML = svgコード（サファリでは動作しません）

4

2 に答える 2

2

これ<object>は、タグのコンテンツである要素にアクセスする方法を示しています。

于 2012-08-20T15:24:04.317 に答える
0

ヘッダーが正しく設定されていることを確認してください。ヘッダーが次のように設定されていない限り、Webkit は SVG 実装で少し選択的になる可能性があることを知っています。

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

詳細については、こちらをご覧ください: https://stackoverflow.com/a/6410814/873836

于 2012-08-20T15:21:53.537 に答える