SVG缩放后如何用JavaScript重新定义path元素的d属性？

核心问题在于：你设置SVG的viewBox为路径的边界盒后，CSS offsetPath 使用的是原始path的大尺寸绝对坐标，当SVG缩放时，这些坐标和pathIcon所在容器的坐标系不匹配，导致路径位置偏移。需要将原始路径的坐标转换为适配当前SVG显示尺寸的相对坐标，重新生成d属性。

实现步骤 #

1. 解析原始path的d指令，提取所有坐标点
2. 计算SVG实际显示尺寸与viewBox的缩放比例
3. 将每个坐标点按比例转换为容器坐标系下的数值
4. 重新构建d字符串，更新path属性与offsetPath

修改后的完整代码 #

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  let svg        = document.querySelector(".svg-path");
  let mPath      = document.getElementById("Path_440");
  let strokePath = document.getElementById("theFill");
  let pathIcon   = document.getElementById("pathIcon");

  const svgRect = svg.getBBox();
  const width   = svgRect.width;
  const height  = svgRect.height;
  svg.setAttribute("viewBox", `0 0 ${width} ${height}`)

  // 解析并转换path的d坐标
  function transformPathD(originalD, svgRect, targetWidth, targetHeight) {
    const commands = originalD.match(/[a-zA-Z][^a-zA-Z]*/g);
    let newD = '';
    const scaleX = targetWidth / svgRect.width;
    const scaleY = targetHeight / svgRect.height;
    // 修正viewBox偏移（如果原始路径不是从(0,0)开始）
    const offsetX = -svgRect.x * scaleX;
    const offsetY = -svgRect.y * scaleY;

    commands.forEach(cmd => {
      const type = cmd[0];
      const coords = cmd.slice(1).trim().split(/[\s,]+/).map(Number);
      const newCoords = [];
      // 遍历所有坐标点，按比例缩放并偏移
      for (let i = 0; i < coords.length; i += 2) {
        const x = (coords[i] * scaleX) + offsetX;
        const y = (coords[i+1] * scaleY) + offsetY;
        newCoords.push(x.toFixed(2), y.toFixed(2));
      }
      newD += `${type}${newCoords.join(' ')} `;
    });
    return newD.trim();
  }

  function defineNewOffsetPath() {
    const svgClientWidth = svg.clientWidth;
    const svgClientHeight = svg.clientHeight;
    const originalD = mPath.getAttribute('d');
    const newPath = transformPathD(originalD, svgRect, svgClientWidth, svgClientHeight);
    
    mPath.setAttribute("d", newPath);
    pathIcon.style.offsetPath = `path('${newPath}')`;
    // 同步更新use元素的引用路径（因为use依赖defs里的path）
    strokePath.setAttribute('href', '#Path_440');
  }

  defineNewOffsetPath();
  // 窗口大小变化时重新计算
  window.addEventListener('resize', defineNewOffsetPath);
})

CSS

.svg-path {
  overflow: visible;
  width: 100%;
  height: auto;
}

#pathIcon {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 200px;
  background-size: 25px;
  offset-rotate: 0rad;
  transition: 0.2s;
  offset-distance: 0%;
}

#Path_440 {
  stroke-width: 2;
  stroke: #001d36;
}

HTML

<div style="height: 175px"></div>
<div id="scrollDiv" style="position: relative">
  <svg class="svg-path" viewBox="0 0 0 0" fill="none">
    <defs>
      <path id="Path_440"
        d="M1293 2S1277 76.47 1197 93.5C1105.55 112.97 888.33 91.07 772.5 100.5 545.5 100.5 302.61 125.94 279 295.5 268 374.5 265.11 419.83 268 503S269.9 645.65 305 741C346.77 854.46 770 838.5 1094.5 832 1366 842.5 1676.02 792 1766 1011 1803.18 1101.5 1766 1457.5 1766 1493.5 1766 1561 1696 1613.5 1618 1627.5 1465 1627.5 1188.11 1632.5 1003.5 1632.5 732.5 1632.5 369.53 1605.69 312 1717.5 271.61 1796 276 1920 276 1982 277.12 2074.28 272.55 2144.17 312 2258 339.86 2338.39 721.15 2324.5 981 2324.5 1297 2324.5 1677.34 2307.5 1739.5 2403.5 1793.57 2487 1772.73 2616.18 1772.73 2765 1772.73 2893 1770.73 2997.5 1652 3032 1612.67 3043.43 1237 3032 893 3032 405.5 3032 2 3030 2 3030"
        stroke="#020878" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="20 20" />
    </defs>
    <use href="#Path_440" stroke-width="10" stroke-dasharray="20 10"></use>
    <use id="theFill" href="#Path_440" stroke-dasharray="1991.82, 9259.88" stroke-width="10" stroke="#4cacff"></use>
  </svg>
  <svg id="pathIcon" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="100" height="200" fill="url(#pattern0)" />
    <defs>
      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_873_8619" transform="scale(0.00353357 0.00176678)" />
      </pattern>
      <image id="image0_873_8619" width="283" height="566" xlink:href="data:image/png;base64,iVBORw0KGgoAAAA" />
    </defs>
  </svg>
</div>

关键说明 #

• transformPathD函数负责解析原始路径指令，将坐标按SVG实际显示尺寸缩放，确保路径和SVG显示区域匹配
• 添加resize事件监听，窗口大小变化时重新计算路径坐标，保证适配性
• 同步更新use元素的引用，确保填充和描边路径也跟随更新

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