規模右側

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

不太確定如果這是您以後的效果，您可能需要稍微澄清說明。但是，你可以結合動畫，並開始一個當另一個結束與開始標籤...的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> 

它也值得其他人尋找到SVG庫像Raphael.js Snap.js Pablo.js使一些比較容易，但你確實提到你想要它純粹的SVG。