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>