动画矩形的高度向上，而不是向下

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> 设置为 height=0 所以我可以从 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"/>

我读过有关需要使用 transform 属性翻转 y 轴的内容，但我所做的一切似乎都无法按我需要的方式工作。

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>

动画矩形的高度向上，而不是向下

Animate a rectangle's height to go up, not down

javascript

svg

snap.svg