如何在相应的滚动上获得虚线（带有向下箭头图标）SVG动画？

Posted 2023-03-28

【中文标题】如何在相应的滚动上获得虚线（带有向下箭头图标）SVG动画？

【英文标题】：How to get dashed line (with down arrow icon) SVG animation on accordingly scroll?

【发布时间】：2021-12-12 09:23:45

【问题描述】：

如何在虚线上添加向下图标（小）？你能帮我吗？喜欢这一行：- How to get dashed line svg animation on accordingly scroll? 只需在虚线上添加一些向下箭头即可。

【问题讨论】：

不清楚需要什么。您能否输入到目前为止的代码并显示您尝试添加箭头的内容并描述箭头相对于动画线的位置。

【参考方案1】：

您可以使用path.getPointAtLength() 方法将箭头形状放置在动画线的头部。

下面是您链接到的代码的清理版本，还有一些额外的代码来添加箭头并在滚动动画发生时正确定位它。

var path = document.getElementById("thePath");
var mask = document.getElementById("maskPath");
var arrow = document.getElementById("arrowhead");

var pathLength = path.getTotalLength();

// Initialise the mask dash pattern to patch the actual path length
mask.style.strokeDasharray = pathLength;

window.addEventListener("scroll", myFunction);


function myFunction() 
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop)
                      / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var len = pathLength * scrollpercent;
  drawPathLength( len );
  drawArrowAtLength( len );



function drawPathLength(len) 
  mask.style.strokeDashoffset = pathLength - len;



function drawArrowAtLength(len) 
  // Get the x,y coordinates of the path at length "len"
  var pos = path.getPointAtLength(len);
  // Reposition the arrowhead at that position
  arrow.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ")");



// Initialise the amount of drawn path to 0
drawPathLength(0);
// Initialise the arrowhead position to the start of the path
drawArrowAtLength(0);

<h1>Scroll down</h1>
<svg   viewBox="0 0 198 1483">
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
      <stop stop-color="#DE1652" offset="0%"></stop>
      <stop stop-color="#F37121" offset="50.2239948%"></stop>
      <stop stop-color="#FBAB26" offset="100%"></stop>
    </linearGradient>
    
    <!-- Note: the 'transform="translate(-646, -266)"' attributes present in this code is to compensate
     for the fact that the path has a large offset from the top left of the SVG. All it does is just move
     the path (and also the arrowhead) to a position where it is visible -->
     
    <path id="thePath"
      d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
      transform="translate(-646, -266)"
      fill="none" />

   <mask id="theMask" maskUnits="userSpaceOnUse">
      <use id="maskPath" xlink:href="#thePath"
           stroke="#fff" stroke- />
    </mask>
  </defs>

  <use id="visiblePath" xlink:href="#thePath"
       stroke-
       stroke-dasharray="12 16"
       stroke="url(#linearGradient-1)"
       mask="url(#theMask)" />
       
  <g transform="translate(-646, -266)">
    <polygon id="arrowhead"
             points="-10,0, 0,20, 10,0"/>
  </g>

</svg>