使用 CSS 的动画线条绘制 (SVG)答案

【问题标题】：Animated line drawing (SVG) with CSS使用 CSS 的动画线条绘制 (SVG)
【发布时间】：2016-03-17 23:34:12
【问题描述】：

我有一个 SVG，我根据滚动位置使用 stroke-dashoffset 和 stroke-dasharray 使用 CSS 制作动画。这很好用。

http://codepen.io/anon/pen/xVRXrY

我想要实现的是，当动画完成时（或者例如，当我向下滚动 500 像素时），笔划将从头开始解构，并使用与我在此处的草图中相同的动画。

【问题讨论】：

标签： svg css-animations

【解决方案1】：

也许您应该使用getTotalLength() 来获取当前路径长度。然后，此脚本是一个示例，其中线条一直延伸到滚动的中间，然后就像您的绘图一样消失。

这是一个演示：https://jsfiddle.net/Ltbvyepj/

这里是 Javascript 代码：

var path = document.querySelector(".path");
// Get the actual length of your path.
var len = path.getTotalLength();
// Dashes have the exact length of the path.
path.style.strokeDasharray = len + " " + len;
// Shift of the length of the path, so the line is quite not visible.
path.style.strokeDashoffset = len;
// Attach to the window's scroll event.
window.addEventListener( 'scroll', function() {
    // Getting the page dimensions.
    var rect = document.querySelector( 'html' ).getBoundingClientRect();
    // Height is the size of the page which is out of screen.
    var height = rect.height - window.innerHeight;
    // Percent of scroll bar. 0 Means the top, 1 the bottom.
    var percent = height < 0 ? 1
            : -rect.top / height;
    // If you omit the `2 *` you will get a growing only path.
    path.style.strokeDashoffset = len * (1 - 2 * percent);
}, false);

【讨论】：