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 元素具有“flash”的特定属性，那么它们的填充属性将改变颜色。当然，上面的方法不起作用——它在寻找元素，而不是属性。那么我如何遍历所有的 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");
    }    
}

您的另一个选择是进行树遍历。

于 2012-08-29T23:21:03.660 回答
2

另一种解决方案是使用 CSS 选择器，这样可以避免更改大量属性并且效果应该相同。

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

更新：需要明确的是，以上内容应放在 svg 文档中。

于 2012-08-30T07:06:25.193 回答
0

使用 Typescript 和 inskscape svg 的其他答案：

this.mySvg = svg.getElementsByTagName("svg")[0];
let myDom = this.svg.getElementsByTagName("*");
    for(let i=0; i < myDom.length; i++) {
      let label = myDom[i].getAttribute('inkscape:label');
      let style = myDom[i].getAttribute('style');
      if (label && style) {
           myDom[i].addEventListener("click", () => this.onClick(myDom[i], style));
      }
    }
于 2018-01-11T14:16:22.533 回答