Javascript onclick 显示多个 SVG

【问题标题】：Javascript onclick display multiple SVGsJavascript onclick 显示多个 SVG
【发布时间】：2015-08-16 19:47:22
【问题描述】：

单击 SVG 多边形后，我试图显示多个 SVG 路径。通过使用

，我能够获得出现 onclick 的单个路径

document.getElementById(id).style.display = "block";

getElementById() 仅适用于一条路径。如何让 onlclick 适用于多个路径？

我在这里尝试使用带有 getElementsByName(id) 的 for 循环和 plunker：http://plnkr.co/edit/5u16eptq1YMSLeuVlya5?p=preview

感谢您的帮助！

【问题讨论】：

标签： javascript svg path onclick

【解决方案1】：

文档中的所有 id 属性必须是唯一的，并且您在 SVG 中 can't use name attributes 以便留下类。

用类替换id属性

<path class ="test-arrow" d="M 1020 290 C1020,40 825,40 765,100" style="display: none; stroke: black; stroke-width: 5px; fill: none; marker-end: url(#markerArrow);"/>
<path class ="test-arrow" d="M 960 385 C920,450 775,550 775,370" style="display: none; stroke: black; stroke-width: 5px; fill: none; marker-end: url(#markerArrow);"/>

使用 getElementsByClassName 名称可以解决问题。

这是更新后的Plunk

【讨论】：