在滚动条上绘制SVG虚线? [英] Draw SVG dashed line on scroll?

问题描述

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

I want to have a svg dashed line drawn on scroll and got stuck on this for 4hrs.

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

If it's just a straight line, I can easily animate it by setting stroke-dasharray on css animation, but it doesn't work on a dashed line.

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

Since there's a background image on body, I cannot use a mask trick either.

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

I just want to have a simple 45 degree diagonal dashed line (about 100px) drawn on scroll.

有什么建议吗?

推荐答案

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

In the next example I'm using the wheel event but you can use scroll instead. And I'm cheating. I'm drawing a dashed path over the path I want to animate. You'll see the animated path through the gaps. I hope it helps.

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

有人评论:

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

what we are supposed to see .. because I see nothing when running the snippet

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

When moving the wheel of your mouse you should see something like this:

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

I'm updating again as an answer to another comment:

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

ok I don't have a wheel, but why not considering the scroll as stated in the question

接下来是我使用滚动事件的演示:

Next comes a demo where I'm using the scroll event:

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>

还有其他评论:

您应该使用遮罩而不是白色路径来隐藏虚线路径，以便除虚线以外的所有内容都保持透明.就像这里一样:对SVG虚线进行动画处理

受此答案启发对SVG虚线进行动画处理我使用的是面具白色的路径.

Inspired by this answer Animate dashed SVG line I'm using a mask instead of a white path.

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>

这篇关于在滚动条上绘制SVG虚线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！