Javascript onclick显示多个SVG

Question

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

获得和显示 onclick 的单独路径

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

getElementById() on 只适用于一条路径。如何让 onlclick 为多个路径工作？

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

感谢您的帮助！

Answer 1

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

将 id 属性替换为 class

<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

Javascript onclick显示多个SVG

Javascript onclick display multiple SVGs

javascript

svg

path

onclick