javascript - 如何同时在两个方向上滚动绘制 SVG？

Question

似乎无法弄清楚这个“丁字路口”如何​​同时向左和向右绘制，而不是先向左，然后向右。

我一直在努力做的事情；

<path class="path" fill="none" stroke="white"  stroke-width="6" id="triangle" d="M 450,50 L 450,200 L350,200 550,200" />

JS fiddle :https://fiddle.jshell.net/ewf9soax/

提前致谢

Answer 1

您需要做的只是对您的路径定义稍作调整。

d="M 450,50 L 450,200 L350,200
   M 450,50 L 450,200 L550,200"

正如 Robert 所建议的，我们将路径分成两个 L 形子路径。一个往左走，一个往右走。由于破折号模式适用于单个子路径，而不是整个路径，因此它会自动起作用。

您可能想要更新您的 stroke-dasharray 长度以补偿子路径现在比原始路径短的事实。

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

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.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() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;
  
  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
}

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

#mySVG {
  position: fixed;
  top: 0:;
  width: 900px;
  height: 810px;
  margin-left:-450px;background-color:green;left: 50%;z-index: 100000;
}

<svg class ="path" id="mySVG">
  <path class="path" fill="none" stroke="white"  stroke-width="6" id="triangle" d="M 450,50 L 450,200 L350,200
                                                                                   M 450,50 L 450,200 L550,200" />


  Sorry, your browser does not support inline SVG.
</svg>

Updated fiddle