0

我正在尝试一个动画，其中一个矩形从 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。如何做到这一点？我尝试了很多方法，但没有得到很好的输出。

4

1 回答 1

1

不太确定这是否是您所追求的效果，您可能需要稍微澄清一下描述。但是您可以结合动画，并在另一个以开始标签结束时开始一个动画......这里的jsfiddle...... 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 库，这使得一些更容易，尽管你确实提到你想让它成为纯 svg。

于 2013-11-25T10:28:21.230 回答