1

次のような HTML ページに JavaScript の一部があります。

function flashElements() {
    var svg = document.getElementById("mysvg").getSVGDocument();
    var all = svg.getElementsByTagName("flash");
    for (var i=0, max=all.length; i < max; i++) {
        if (all[i].flash === "on")
        {
            all[i].setAttributeNS(null, "fill", "lime");
        }
    }
}

SVG を次のようにロードします。

<object data="alpha.svg" type="image/svg+xml" id="mysvg" width="800" height="600"></object>

アイデアは、特定のトリガーでこれを呼び出すことであり、SVG 要素に「フラッシュ」の特定の属性がある場合、それらの塗りつぶし属性の色が変わります。もちろん、上記は機能しません - 属性ではなく要素を探しています。では、特定の属性を持つものを探して、すべての SVG 要素を反復処理するにはどうすればよいでしょうか?

SVG には次のものがあります。

<polygon points="203,20 209,32 205,32 203,28" class="trackPlain" flash="on" />
<polygon points="205,32 209,32 217,48 213,48" class="trackPlain" flash="off" />

実際にやりたいことは、要素をフラッシュすること (オン/オフ) だけですが、もちろん IE はアニメーションをサポートしていません。

4

3 に答える 3

3

あまり効率的ではありませんが、次のようなことができると思います。

var allElements = svg.getElementsByTagName("*");
for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if(element.getAttribute("myAttr") === "on") {
        element.setAttribute("fill", "lime");
    }    
}

もう 1 つのオプションは、ツリー トラバーサルを実行することです。

于 2012-08-29T23:21:03.660 に答える
2

別の解決策は、CSSセレクターを使用することです。これにより、大量の属性を変更することを回避でき、効果は同じになります。

<style>
  .trackplain[flash="on"] { fill: lime; }
</style>

更新:明確にするために、上記は svg ドキュメント内に配置する必要があります。

于 2012-08-30T07:06:25.193 に答える