使用 Vanilla JavaScript 操作 SVG 路径坐标

Question

我有一个 svg 路径，在“d”属性中有以下几点。 这有一种方法可以让我只定位“d”中的一个坐标数，比如“L25 0”中的 0，以便在 java 脚本中进行操作。 如果那么这种语法会是什么样子？ 我希望能够访问其中一个坐标号，以便我可以增加它来为路径设置动画。

 function NavHalf() { var arrow = document.getElementById("arrowUp"); arrow.setAttribute('d', 'M0 25 L25 0 L50 25'); }

 <svg height="25" width="50" onclick="NavHalf()"> <path id="arrowUp" d="M0 0 L25 25 L50 0 " style="stroke:green;stroke-width:2; fill:none" /> </svg>

Answer 1

正如迈克尔斯评论的那样。 实际上没有任何基于 DOM 的方法可以直接访问和操作路径定义中的一个点。

字符串操作几乎是你能做的。

 function NavHalf(x,y) { var arrow = document.getElementById("arrowUp"); arrow.setAttribute('d', 'M0 0 L' + x + ',' + y + ' L50 0'); }

 <button type="button" onclick="NavHalf(25,0)">Position 1</button> <button type="button" onclick="NavHalf(20,15)">Position 2</button> <button type="button" onclick="NavHalf(25,25)">Position 3</button> <svg height="25" width="50"> <path id="arrowUp" d="M0 0 L25 25 L50 0" style="stroke:green;stroke-width:2; fill:none" /> </svg>