在滚动条上绘制SVG虚线？

Question

我想在滚动条上画一条svg虚线，并在上面停留4个小时。

如果只是一条直线，我可以通过在CSS动画上设置stroke-dasharray来对其进行动画处理，但在虚线上不起作用。

由于身体上有背景图像，所以我也不能使用蒙版技巧。

我只想在滚动条上绘制一条简单的45度对角虚线（约100像素）。

有什么建议吗？

Answer 1

在下一个示例中，我使用了wheel事件，但是您可以改用滚动。而且我在作弊。我在要设置动画的路径上绘制了一条虚线路径。您将看到通过间隙的动画路径。希望对您有所帮助。

var svg = document.querySelector("svg");
var l = track.getTotalLength();
var dasharray = l;
var dashoffset = l;
theUse.style.strokeDasharray = dasharray;
theUse.style.strokeDashoffset = dashoffset;

document.addEventListener("wheel",

  function(e) {

    e.preventDefault();
    if (dashoffset > 0 && e.deltaY > 0 || 
        dashoffset < l && e.deltaY < 0) {
        dashoffset -= e.deltaY;
    }
   if(dashoffset < 0)dashoffset = 0;
   if(dashoffset > l)dashoffset = l;
    
    theUse.style.strokeDashoffset = dashoffset;
  }, false);

svg{border:1px solid}

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 -23 238 120">
<defs>
<path id="track" fill="none"  d="M18.265,6.037c0,0,22.354-2.458,32.585,2.709c13.401,6.768,22.928,25.006,33.864,30.677c10.935,5.67,11.901,9.014,21.216,8.608c10.013-0.435,11.08-5.485,14.862-5.485
	c9.801,0,25.631,24.662,36.168,24.115c14.971-0.777,9.135-0.936,22.096-0.531c12.959,0.406,29.501,7.144,41.247,4.309"/>
 </defs>
 <use xlink:href="#track" id="theUse" stroke="black" />
 <use xlink:href="#track" stroke-dasharray="10 10" stroke="white" stroke-width="2" />

更新

有人评论：

  

我们应该看到的..因为运行代码段时我什么都看不到

在移动鼠标滚轮时，您应该看到类似以下内容的

：

更新2

我将再次更新作为对另一条评论的答案：

  

好吧，我没有轮子，但是为什么不考虑问题中所述的滚动

接下来是一个演示，其中我正在使用滚动事件：

var l = thePath.getTotalLength();
var dasharray = l;
track.style.strokeDasharray = dasharray;
var dashoffset = l;
track.style.strokeDashoffset = dashoffset;
wrap.addEventListener("scroll", function() {
  // - 10 is because I want to offset slightly the dashoffse
  dashoffset =
    -10 + l - this.scrollTop * l / (this.scrollHeight - this.clientHeight);
  
    track.style.strokeDashoffset = dashoffset;
});

#wrap,svg{border:1px solid}
#wrap{height:200px; overflow:scroll}
use{fill:none}

<div id="wrap">
<svg id="svg"
	 width="100" viewBox="0 0 78.571 753.021" >
  
  <defs>
    <path id="thePath" d="M46.249,7c0,0-37.5,0-37.5,32.812s20.312,56.25,37.5,75
	s23.881,51.525,6.25,73.438c-31.43,39.062,21.875,43.882,18.75,70.378s-35.938,63.997-45.312,90.559s17.08,37.5,23.438,81.25
	s-23.438,75-18.75,118.75s45.312,75,26.562,103.125s-51.812,83.438-50.125,100"/>
  </defs>
 <use xlink:href="#thePath" id="track" stroke="black" />
 <use xlink:href="#thePath" stroke-dasharray="10 10" stroke="white" stroke-width="2" /> 
</svg>
</div>

更新编号3

还有其他评论：

  

您应该使用遮罩而不是白色路径来隐藏虚线路径，以便除虚线以外的所有内容都保持透明。就像这里：Animate dashed SVG line

受此答案Animate dashed SVG line的启发，我使用的是面具而不是白色的路径。

var l = thePath.getTotalLength();
var dasharray = l;
mask.style.strokeDasharray = dasharray;
var dashoffset = l;
mask.style.strokeDashoffset = dashoffset;
wrap.addEventListener("scroll", function() {

  dashoffset =
    l - this.scrollTop * l / (this.scrollHeight - this.clientHeight);
  
    mask.style.strokeDashoffset = dashoffset;
});

#wrap,svg{border:1px solid}
#wrap{height:200px; overflow:scroll}
use{fill:none;}
path{stroke-width:3px;}
#mask{stroke:white}

<div id="wrap">
<svg id="svg"
	 width="100" viewBox="0 0 78.571 753.021" >
  
  <defs>
    <path id="thePath" d="M46.249,7c0,0-37.5,0-37.5,32.812s20.312,56.25,37.5,75
	s23.881,51.525,6.25,73.438c-31.43,39.062,21.875,43.882,18.75,70.378s-35.938,63.997-45.312,90.559s17.08,37.5,23.438,81.25
	s-23.438,75-18.75,118.75s45.312,75,26.562,103.125s-51.812,83.438-50.125,100"/>
    
<mask id="mask1">
  <use id="mask" xlink:href="#thePath" />
</mask>
    
  </defs>
 <use xlink:href="#thePath" stroke-dasharray="10 10" stroke="black"  mask="url(#mask1)" /> 
  
</svg>
</div>