SVG pathLength 属性

SVG (Scalable Vector Graphics) 是可伸缩矢量图形的缩写。SVG 使用 XML 语言描述矢量图形，可以在网页上放大缩小而不失真。其中，path 元素被广泛使用，可以描绘出各种形状、线条和曲线。

pathLength 属性

pathLength 属性是用来指定 path 元素路径的总长度的。它可以是一个非负数值或百分比。设置了 pathLength 属性的 path 元素可以通过 stroke-dasharray 和 stroke-dashoffset 属性进行动画处理。

使用

设置 pathLength 属性以后，path 元素就可以通过 stroke-dasharray 和 stroke-dashoffset 属性进行动画处理。

<svg viewBox="0 0 100 100">
  <path d="M20,50 C20,-20 80,-20 80,50" 
    stroke="black" 
    stroke-width="5"
    pathLength="200"/>
</svg>

path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dash 3s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

在上面的代码片段中，我们定义了一个贝塞尔曲线，并设置了 pathLength 属性为 200。接着，我们通过 CSS3 的动画效果将 stroke-dashoffset 从 200（路径总长度）减少到 0，实现了图形的逐渐显现动画效果。

总结

SVG pathLength 属性可以用于动画效果的设计，给 path 元素带来更多的可能性。平滑的曲线、酷炫的动画，这些都离不开 SVG 的强大功能。希望大家可以善用 SVG 技术，打造出更精美的网页效果。