如何用SMIL动画自画线（不是CSS）

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）

How to self-draw a line with SMIL animation (not CSS)

animation

svg

smil