使用 Vanilla JavaScript 操作 SVG 路径坐标答案

【问题标题】：Manipulating SVG Path Coordinate with Vanilla JavaScript使用 Vanilla JavaScript 操作 SVG 路径坐标
【发布时间】：2019-10-19 00:35:02
【问题描述】：

我有一个 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>

【问题讨论】：

SVG 1.1 有一个 DOM 接口 - PathSegList ，您可以使用它来索引单个路径元素 - 但我认为这已在 Chrome 中被删除并且通常已被弃用。
This 问题与您的问题相似，前两个答案似乎包含您需要的信息。
您可以使用一个数组来保存您的坐标 (["M0 25", "L25 25" ,... ]) 以便于管理，然后使用 .join() 将其解析回字符串
请使用setAttributeNS 而不是setAttribute
@enxaneta 这里不需要使用 setAttributeNS()。

标签： javascript svg

【解决方案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>

【讨论】：