使用 SVG 的虚线路径

Question

我关注 this 并制作了自己的 svg 路径滚动。我实现了动画，但我似乎可以找到为什么破折号没有出现在线上。我尝试了不同的方法，但仍然找不到任何解决方案。请有人帮忙。

// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();

circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
  // What % down is it?
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop * 4) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Length to offset the dashes
  var draw = length * scrollpercent;

  // Reverse the drawing (when scrolling upwards)
  myline.style.strokeDashoffset = length - draw;

  //get point at length
  endPoint = myline.getPointAtLength(draw);
  circle.setAttribute("cx", endPoint.x);
  circle.setAttribute("cy", endPoint.y);

}

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

#circle {
  fill: #000;
}

#myLine {
  stroke-dasharray: 8;
}

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

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: green;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 20;
}

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

<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="st0 mask-style" 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>
  </defs>
  <circle id="circle" cx="404" cy="20" r="8"/>
  <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)" />
</svg>

所以我正在尝试只是使路径虚线。

Answer 1

您需要构造正确的 stroke-dash-array - 现在 CSS 指定的 stroke-dasharray (10,9) 被 myline.style.strokeDasharray = length 覆盖。这需要类似于 "10, 9, 10, 9, 10, 9, 10,9, 10,9" + 长度 - 所以被偏移隐藏的线部分有一个适当的破折号。

以下调整并不完全正确 - 您需要编写一些代码来构建正确的 dash-array - 但它应该会给您这个想法。

// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();

circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = "0, " + length + " ,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9 " + length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
  // What % down is it?
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop * 4) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Length to offset the dashes
  var draw = length * scrollpercent;

  // Reverse the drawing (when scrolling upwards)
  myline.style.strokeDashoffset = length - draw;

  //get point at length
  endPoint = myline.getPointAtLength(draw);
  circle.setAttribute("cx", endPoint.x);
  circle.setAttribute("cy", endPoint.y);

}

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

#circle {
  fill: #000;
}

#myLine {
  stroke-dasharray: 8;
}

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

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: green;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 20;
}

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

<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="st0 mask-style" 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>
  </defs>
  <circle id="circle" cx="404" cy="20" r="8"/>
  <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)" />
</svg>