Animiere die Höhe eines Rechtecks, um nach oben zu gehen, nicht nach unten

Question

Ich bin ziemlich neu bei snap.svg. Ich habe ein Balkendiagramm mit rechteckigen Elementen, die vertikal wachsen. Ich habe Probleme, sie zu animieren, von 0 Höhe zu etwas wie 200 zu gehen. Sie alle animieren von oben nach unten. Ich brauche sie von Grund auf.

Das ist mein 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); 

}); 

Und das sind einige Beispiele für die <rect> Bars auf der Karte. Der erste <rect> ist auf height=0 so kann ich es von 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"/> 

Start animieren Ich habe Dinge gelesen, um die y-Achse mit einem transform Attribut zu kippen, aber nichts, was ich getan habe, scheint die Art und Weise zu arbeiten, Ich brauche es.

Answer 1

Die x und y Attribute repräsentieren die oben links Ecke Ihres Rechtecks. Verringert die Spitzenposition durch den gleichen Wert wie die Höhe zunimmt:

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

height + y für den Stab bleiben, um gleich muss ihre Position zu halten. Hier ein Beispiel:

<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>