Question

我对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轴的事情，但我所做的一切似乎都按照我需要的方式工作。

Answer 1

x和y属性代表矩形的左上角角。将顶部位置减小与高度增加相同的值：

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

height + y需要保持平等，以便酒吧保持其位置。这是一个例子：

＆＃13;

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

＆＃13;

为矩形的高度设置动画，使其向上，而不是向下

1 个答案: