CSS3 SVGアニメーションで上に縦線を描く

Question

SVGアニメーションでは非常に新しいです。 CSS3 SVGアニメーションで縦線をどのように伸ばすことができますか？線は下から始まり、高さまでカスタム高（例：0〜100）に成長する必要があります。私は以下のコードを持っています：

<svg height="210" width="10"> 
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:3" /> 
</svg> 

これは初期の位置です。私はy2の値を増やそうとしましたが、それは下向きに成長します。これは望ましくありません。私にCSS3キーフレームアニメーションの例を示してください。前もって感謝します。

Answer 1

通常、曲線を描画するプロセスをアニメーション化するには、ストロークダッシュオフセットをアニメートします。ここでは非常に単純な例です：

<path fill="url(#rg)" transform="translate(7,5) scale(.62)" stroke="url(#rg)" stroke-opacity=".6" stroke-width="15" stroke-dasharray="45 45" fill-rule="evenodd" 
     d="M64,33 c27 -16,89,0,68,22 C103,84,41,39,13,67 c-24,24,20,49,42,43 C103,97,78,0,36,1 C10,1.5 -3,28,2,52 c3,12,10,22,21,27 c8,3,21,5,29,2 c16-4,8-26,16 -36 c7-10,26-7,34.73 0 c21,16,11,64-1,83 c-6,9-20,17-31,13 c-14 -5-12-24-14-36 C52,82,39,47,64,33z"> 
    <animate attributeName="stroke-dashoffset" values="0;900;1800" dur="45s" repeatCount="indefinite"/> 
</path> 

ラインの（同じこと - パスの単純な場合 - 単に値が行全体をカバーするのに十分な大きさであることを確認してください の作業例は：http://cs.sru.edu/%7Eddailey/tangles/drawingcurve.svg 。現在、SVGの幾何学的属性はCSSで変更できませんので

Answer 2

あなたはこのためにCSSアニメーションを使用することはできません（勾配は、それはかなり作ることしかない）。のみスタイリング性質がある。

の起源SVGは左上にあり、左下にはありません。疑問。したがって、下から始まり上向きに伸びる線を描きたい場合は、高いY座標値から始めて縮小する必要があります。

ここには2行のSVGの例があります。緑色のものは、もう一方の高さの半分であり、両方が同じ底部座標から始まります。

<svg height="210" width="10"> 
 
    <line x1="2" y1="0" x2="2" y2="210" style="stroke:rgb(255,0,0);stroke-width:3" /> 
 
    <line x1="8" y1="100" x2="8" y2="210" style="stroke:rgb(0,128,0);stroke-width:3" /> 
 
</svg>