实现SVG滚动路径绘制动画后虚线不显示如何解决

问题根因排查 #

• JS代码直接覆盖了路径的虚线配置：你在JS初始化时设置了myline.style.strokeDasharray = length;，行内样式优先级远高于CSS类、HTML属性的配置，直接把你设置的10,9/20这类虚线参数替换成了等于路径总长度的单段虚线，所以最终显示出来的是实线的绘制效果，看不到分段虚线。
• 定义的mask未实际使用：你在SVG的defs里定义了dash-mask，但没有给绘制的myline路径添加mask="url(#dash-mask)"属性，mask的虚线效果完全没生效。
• CSS选择器大小写不匹配：CSS里写的#myLine选择器，但是HTML中路径的id是全小写的myline，SVG的id选择器区分大小写，所以这部分样式完全没生效。
• 滚动百分比计算逻辑错误：你给document.documentElement.scrollTop乘了4，会导致滚动进度计算偏差，路径绘制进度和实际滚动进度不匹配。

修复方案 #

核心逻辑是拆分功能：用mask内的路径专门做滚动显示控制，用外层的业务路径负责展示虚线样式，避免滚动绘制的dash配置和虚线本身的配置冲突。

1. 调整JS代码

// 选中mask里的路径做滚动绘制控制，不修改业务路径的虚线配置
var maskPath = document.querySelector("#dash-mask path");
var length = maskPath.getTotalLength();
var myline = document.getElementById("myline");
var circle = document.getElementById("circle");

// 仅给mask路径设置绘制动画的dash配置
maskPath.style.strokeDasharray = length;
maskPath.style.strokeDashoffset = length;

window.addEventListener("scroll", myFunction);

function myFunction() {
  // 移除错误的*4系数，修正滚动百分比计算
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var draw = length * scrollpercent;

  maskPath.style.strokeDashoffset = length - draw;

  endPoint = myline.getPointAtLength(draw);
  circle.setAttribute("cx", endPoint.x);
  circle.setAttribute("cy", endPoint.y);
}

2. 调整HTML代码，给展示路径加上mask属性

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.099 699.491" style="padding-bottom: 0%;  overflow: visible;">
  <defs>
    <mask id="dash-mask">
      <path class="mask-style" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)"/>
    </mask>
  </defs>
  <circle id="circle" cx="404" cy="20" r="8"/>
  <!-- 新增mask属性关联定义好的遮罩 -->
  <path id="myline" class="st0" stroke-dasharray="10,9" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)" mask="url(#dash-mask)"/>
</svg>

3. 清理冗余CSS配置

body {
  height: 2000px;
  background: #f1f1f1;
}

#circle {
  fill: #000;
}

#mySVG {
  position: relative;
  top: 10%;
  width: 90vw;
  height: 90vh;
  margin-left: -50px;
}

.st0 {
  fill: none;
  stroke: green;
  stroke-width: 5;
  stroke-miterlimit: 10;
  /* 这里配置你需要的虚线参数即可 */
  stroke-dasharray: 10 9;
}

.mask-style {
  fill: none;
  stroke: white;
  stroke-width: 7;
}

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