0

javascriptを介してアクセスしているsvgファイルがあります。このような

 this.m_svg = new Element('embed');
this.m_svg.setAttribute("src","img/gauge.svg");

以前はsvgをインライン化していたので、そのすべての要素にアクセスできました。しかし、それ（svg image）はsafariでレンダリングされませんでした。それで、私はこのように採用しました。これで画像は完全にレンダリングされましたが、JavaScriptの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>

要素「needle」にアクセスする必要があります。

PS：htmlには何も追加できません。すべてはjavascript側で行う必要があります。

4

1 に答える 1

2

例を作成し、それをgitリポジトリにプッシュしました。この質問で提供したSVG画像を使用しました。正常に機能していますが、問題が1つあります。それは、からの背景画像img/gauge.pngが2回目に読み込まれないことです。

したがって、現在の質問は答えられているように見えますが、SVGファイルからのその画像に関する質問はまだ開いています。

回避策は、画像を要素（要素のコンテナ）gauge.pngの背景画像として使用し、SVGから完全に削除することです。divobject

後でまた遊ぶかもしれませんが。

于 2012-08-18T02:05:28.307 に答える