使用JavaScript查找具有特定属性的SVG元素
Finding SVG elements with particular attributes using JavaScript
我在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当然不支持动画。
效率不是很高,但我想你可以做这样的事情:
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");
}
}
您的另一个选择是进行树遍历。
另一个解决方案是使用CSS选择器,这样可以避免更改大量属性,并且效果应该相同。
<style>
.trackplain[flash="on"] { fill: lime; }
</style>
更新:需要明确的是,以上内容应该放在svg文档中。
使用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));
}
}
相关文章:
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- JavaScript-动态SVG-onload属性-未触发事件
- 使用JavaScript查找具有特定属性的SVG元素
- SVG-全局属性和事件的列表
- 具有描边属性的 SVG 样式 G 元素
- 无法使用 Snap.SVG将“填充”属性设置为“继承”
- 我把“;类“;SVG中存在但未应用的节点的属性!为什么?
- Fabric js从url加载svg缺少属性
- 如何理解snap.svg中的Transform属性
- 在D3.js中为svg:g元素添加title属性
- 类似文本锚的属性,用于对齐 SVG 或 G 元素
- 无法更改三个容器中的 SVG 矩形属性
- 如何在结构中导出具有自定义属性的 SVG.js
- 如何使用 jQuery 更改 SVG 元素属性
- 更改 <对象> 标记的属性,该标记使用 jQuery 包含一个 SVG 元素
- 在捕捉.svg图形上设置 ID 属性
- 使用 javascript 修改 svg 属性不起作用
- SVG DOM 使用变量来定义对象属性
- 如何在虚拟 dom 中定义 svg 属性
- 属性的 SVG 编号项不起作用