Question

我正在尝试一个动画，其中矩形从1到3缩放，然后应缩放回1。但是，问题是缩放应该从左上角开始并在右上角结束。

<rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale"
                      from="1" to="3"
                      begin="0s" dur="10s"
                      additive="sum"
            />
</rect>

我想在纯SVG标签中实现这一点，而不是D3或raphael.js。怎么能实现这一目标？我尝试了很多方法，但没有很好的输出。

Answer 1

不太确定这是否是您所追求的效果，您可能需要稍微澄清一下说明。但你可以组合动画，并在另一个完成时使用begin标签开始... jsfiddle here ... http://jsfiddle.net/kSYHH/和http://jsfiddle.net/kSYHH/3/

<svg>
  <rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                  type="translate"
                  from="0" to="40"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
      />

     <animateTransform attributeName="transform" attributeType="XML"
                  id="animout"
                  type="scale"
                  from="1" to="3"
                  begin="0s" dur="3s"
                  additive="sum"
     />
     <animateTransform attributeName="transform" attributeType="XML"
                  type="scale"
                  from="3" to="1"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
     /> 


  </rect>
</svg>

它也值得其他任何人研究像Raphael.js Snap.js Pablo.js这样的svg libs，它们会让一些事情变得更容易，尽管你提到你想让它成为纯粹的svg。

缩小到右侧

1 个答案: