SVG startOffset 属性

SVG (Scalable Vector Graphics) 是一种用于描述 2D 图形的 XML 标记语言。在 SVG 中，startOffset 属性定义了沿路径渐变的起始偏移量。

属性语法

<animate 
  attributeName="startOffset" 
  attributeType="XML" 
  from="startOffset-startValue" 
  to="startOffset-endValue" 
  dur="animation-duration" 
  repeatCount="animation-iteration-count" 
  fill="freeze" />

属性值

• startOffset-startValue: 渐变起始偏移量的起始值。
• startOffset-endValue: 渐变起始偏移量的结束值。
• animation-duration: 动画的持续时间，以秒为单位。
• animation-iteration-count: 动画的重复次数。可以是一个数字或关键字 "indefinite"，表示无限重复。
• fill: 动画执行完毕后，元素应该保持的状态。可以是 "remove"、"freeze" 或 "default"。

用法示例

下面是一个 SVG 渐变的例子，其中 startOffset 属性用于定义沿着路径的渐变起始偏移量：

<svg width="100" height="100">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="50%" stop-color="yellow"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
    <path d="M 10 10 L 90 90" id="myPath"/>
  </defs>
  
  <ellipse cx="50" cy="50" rx="45" ry="25" fill="url(#myGradient)">
    <animateMotion 
      path="#myPath" 
      dur="10s" 
      repeatCount="indefinite"/>
    
    <animate 
      attributeName="startOffset" 
      attributeType="XML" 
      from="0%" 
      to="100%" 
      dur="10s" 
      repeatCount="indefinite"/>
  </ellipse>
</svg>

在上面的例子中，我们创建了渐变 myGradient 和路径 myPath。然后，我们在 <ellipse> 元素中使用 fill="url(#myGradient)" 将渐变应用于椭圆形。

使用 <animateMotion> 元素和 path 属性，我们将椭圆形沿着路径 myPath 移动。

最后，我们使用 <animate> 元素和 attributeName 属性将 startOffset 属性从 0% 到 100% 进行动画处理，使渐变沿着路径逐渐进行。

运行上面的代码，您可以看到椭圆形沿着路径移动，并沿着路径边缘渐变颜色。

总结

• startOffset 属性定义了沿路径渐变的起始偏移量。
• from 和 to 属性用于设置渐变起始偏移量的起始值和结束值。
• <animate> 元素可以用于定义 startOffset 属性的动画效果。
• 在 fill 属性中，"freeze" 表示在动画结束时保持动画后状态。