如何使用原生JavaScript单独操作SVG路径d属性中的单个坐标

你完全能定位并修改SVG路径d属性里的单个坐标数值，而且还能通过这个方式实现平滑的路径动画。下面我会结合你的示例代码，一步步教你怎么实现：

1. 先解析d属性的字符串内容 #

SVG的d属性是一串包含指令（比如M代表移动，L代表直线）和坐标的字符串，咱们得先把它拆分成可单独操作的部分。常用的方法是用正则表达式拆分，把指令和坐标分开：

// 获取路径元素
const arrow = document.getElementById("arrowUp");
// 获取当前d属性值
let dString = arrow.getAttribute('d');
// 拆分指令和坐标：匹配空格或者指令字符（M/L等）的位置，分割成数组
const parts = dString.split(/\s+|(?=[ML])/).filter(part => part !== '');
// 拆分后parts数组会是这样：["M", "0", "0", "L", "25", "25", "L", "50", "0"]

2. 定位并修改单个坐标 #

从上面的数组里，你可以精准定位到想要修改的坐标。比如你想修改第一个L指令的y坐标（也就是示例里的25，对应数组索引5的位置），直接修改数组元素即可：

// 把目标坐标转成数字，递增1（你可以改成任意增量）
parts[5] = Number(parts[5]) + 1;
// 把数组重新拼接成d属性的字符串格式
const newDString = parts.join(' ');
// 把新的d属性设置回路径元素
arrow.setAttribute('d', newDString);

3. 实现平滑的路径动画 #

如果想做持续的递增动画，咱们可以用requestAnimationFrame来实现流畅的动画效果，而不是一次性修改。比如写一个动画函数，让箭头的中间点慢慢向上移动：

function animateArrow() {
  const arrow = document.getElementById("arrowUp");
  let dString = arrow.getAttribute('d');
  const parts = dString.split(/\s+|(?=[ML])/).filter(part => part !== '');
  
  // 取中间L指令的y坐标，这里咱们让它递减到0（模拟向上移动）
  let currentY = Number(parts[5]);
  if (currentY > 0) {
    parts[5] = currentY - 1;
    arrow.setAttribute('d', parts.join(' '));
    // 继续下一帧动画
    requestAnimationFrame(animateArrow);
  }
}

// 修改点击事件，触发动画
function NavHalf() {
  animateArrow();
}

完整的示例代码 #

把上面的逻辑整合到你的SVG代码里，最终效果如下：

<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>

<script>
function animateArrow() {
  const arrow = document.getElementById("arrowUp");
  let dString = arrow.getAttribute('d');
  const parts = dString.split(/\s+|(?=[ML])/).filter(part => part !== '');
  
  let currentY = Number(parts[5]);
  if (currentY > 0) {
    parts[5] = currentY - 1;
    arrow.setAttribute('d', parts.join(' '));
    requestAnimationFrame(animateArrow);
  }
}

function NavHalf() {
  animateArrow();
}
</script>

补充说明 #

• 正则表达式/\s+|(?=[ML])/的作用：\s+匹配空格，(?=[ML])是正向预查，会在遇到M或L这样的指令字符前分割，这样就能把指令和坐标拆分开。
• 如果你的路径有更复杂的指令（比如C贝塞尔曲线、A圆弧），只需要调整数组的索引位置，就能定位到对应的坐标值。

内容的提问来源于stack exchange，提问作者Nhan Bui