如何在滚动时绘图

滚动绘图

使用 SVG 和 JavaScript 在滚动时绘制三角形 - 请注意，它必须是 <path> 元素：

实例

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>

<script>
// 获取 ID 为 "triangle" 的 <path> 元素
var triangle = document.getElementById("triangle");
// 获取 <path> 元素的长度
var length = triangle.getTotalLength();

// 绘图的起始位置（设置虚线模式。这里设置为与路径长度相同的值，实际上是将整个路径视为一个“大虚线”。）
triangle.style.strokeDasharray = length;

/* 设置虚线偏移量。初始时设置为路径长度，使得整个路径被偏移出视图，从而隐藏三角形。
随着滚动，这个偏移量会逐渐减小，从而逐渐显示出三角形。
删除这行代码可以在滚动绘制之前显示三角形。*/
triangle.style.strokeDashoffset = length;

// 监听窗口的滚动事件，并在滚动时调用 myFunction 函数。
window.addEventListener("scroll", myFunction);

function myFunction() {
  // 计算滚动百分比 =（当前滚动高度） / （总可滚动高度）
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // 计算应该绘制的长度 = 总长度 * 滚动百分比
  var draw = length * scrollpercent;

  // 当向上滚动时，实际上是反向绘制（从完整到不完整），所以这里用总长度减去应该绘制的长度。
  triangle.style.strokeDashoffset = length - draw;
}
</script>

亲自试一试

相关页面

教程：SVG 教程