次のような 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 はアニメーションをサポートしていません。