Question

我想知道如何在<animate> SMIL标记内完成SVG this CSS self-drawing effect。而不是使用CSS动画我会使用类似的东西：

<line fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/>
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="#BBBBBB" dur="0.5s" begin="0"  />

然而，我无法使其发挥作用。什么是正确的方法？

Answer 1

除了通过id访问行和没有id的行之外，动画没有太大问题。

我也增加了持续时间并改变了颜色，使其更加清晰。

<svg>
  <line id="first-line" fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/>
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="red" dur="2.5s" begin="0"  />
  </svg>

如何使用SMIL动画（而不是CSS）自行绘制一条线

1 个答案: