为矩形制作动画'它的高度应该上升，而不是下降

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

本文关键字：高度 动画      更新时间：2023-09-26

我对snap.svg很陌生。我有一个条形图，它包含垂直增长的矩形元素。我很难将它们从0高度设置为200高度。它们都是自上而下的动画。我需要他们自下而上。

这是我的睡衣。。

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轴的文章，但我所做的似乎都没有达到我需要的效果。

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>

相关文章：