矩形の高さをアニメーション化して、上向きではなく下向きにします。

Question

私はsnap.svgでかなり新しいです。私は垂直に成長する矩形要素の棒グラフを持っています。 0の高さから200のようなものにアニメーション化するのに問題があります。それらはすべて上から下にアニメーション化されます。私は彼らがボトムアップから行く必要があります。

これは私のjs ..です

var s = Snap(".performance_chart"); 

Snap.load("images/performance.svg", function(f) { 

    bar1 = f.select(".bar1").animate({height:202.43}, 1000, mina.linear); 

    s.append(f); 

}); 

そして、これらは、チャート上の<rect>バーのいくつかの例です。最初<rect>はので、私は私がやったtransform属性だけを使用してy軸を反転する必要についての事を読ん0

<rect class="bar bar1" x="108.3" y="246.08" width="55.21" height="0"/> 
<rect class="bar bar2" x="252.89" y="251.52" width="55.21" height="77.67"/> 
<rect class="bar bar3" x="308.09" y="112.25" width="55.21" height="216.93"/> 
<rect class="bar bar4" x="395.5" y="237.85" width="55.21" height="91.34"/> 

から始め、それをアニメーションのように動作するように思えることができheight=0に設定されています私はそれが必要です。

Answer 1

xおよびyの属性は、左上のの矩形のコーナーを表します。高さが増加すると同じ値でトップ位置を下げる：

bar1 = f.select(".bar1") 
    .animate({ 
    height:202.43, 
    y: 246.08 - 202.43 
    }, 1000, mina.linear); 

height + yがその位置を維持するバーために同じままである必要があります。ここでは例を示します。

<div style="display: inline-block; background: #eee;"> 
 
    <h2>Start</h2> 
 
    <svg height="50" width="50" viewBox="0 0 100 100"> 
 
    <rect width="10" height="30" x="45" y="70"></rect> 
 
    </svg> 
 
</div> 
 

 
<div style="display: inline-block"> 
 
    <h2>End</h2> 
 
    <svg height="50" width="50" viewBox="0 0 100 100"> 
 
    <rect width="10" height="70" x="45" y="30"></rect> 
 
    </svg> 
 
</div>