なぜ私のSVGコード内に2番目の矩形が表示されないのですか

Question

私はこのコードを理解しています。 2番目には幅を単純に拡大するアニメーションがあります。このコードでは、青色のバーが表示され、黄色のバーが表示され、期待通りに成長しますが、終了すると消えます。両方とも同じ開始点と幅を持ち、プログレスバーを作成します。青いバーの長さが400個のピクセルで、黄色が唯一の250ですので、私は、少なくともそれは私が

<svg xmlns='http://www.w3.org/2000/svg'> 
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'> 
    </rect> 
    <rect x='10' y='10' height='20' width='0' style='stroke:#ff0000; fill: #ffff00'> 
<animate attributeName='width' attributeType='XML' 
    to='250' 
    begin='0s' 
    dur='2s' /> 
    </rect> 
</svg> 

が、私はまだSVGに新しいですが起こっされるべきだと思うものですが、これはから動作するはず青の150個のピクセルが表示されるはずです私が黄色のバーを読んだことは、最後に行われ、それが一番上になるようにします。

Answer 1

animateタグには、'freeze'という値の明示的なfillパラメータが含まれている必要があります。それ以外の場合は、デフォルトのfill='remove'が使用されます。つまり、アニメートされたパラメータはアニメーションの前の値（この場合は「0」）に戻ります。

<svg xmlns='http://www.w3.org/2000/svg'> 
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'> 
    </rect> 
    <rect id="r1" x='10' y='10' height='20' width='0' style='stroke:#ff0000; fill: #ffff00'> 
<animate attributeName='width' attributeType='XML' 
    from='0' 
    to='250' 
    begin='0s' 
    dur='2s' 
    fill='freeze' 
     /> 
    </rect> 
</svg> 

（の完全なリファレンス：https://www.w3.org/TR/SVG/animate.html#ValueAttributes）