SVG動畫 - 如何改造縮放點

我試圖從動畫的下邊緣的矩形的高度，因此向上擴展隨着時間的推移而不是向下（從它的天然產地）SVG動畫 - 如何改造縮放點

這裏的XML的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
    y="0px" width="256px" height="256px" viewBox="0 0 256 256" xml:space="preserve"> 
<g id="PARENT"> 
    <rect id="yellow_rect" x="100" y="200" fill="#FFF80B" stroke="#020202" stroke-miterlimit="10" width="20" height="20"/> 
</g> 
<g id="CHILD"> 
    <rect id="red_rect" x="77.047" y="16.375" fill="#FF0000" stroke="#000000" stroke-width="5" stroke-miterlimit="10" width="45.906" height="183.625"> 
     <animate attributeName="height" attributeType="XML" begin="0s" dur="2s" 
      fill="freeze" from="0" to="183.625"/> 
    </rect> 
</g> 
</svg>

transform =「translate ...」不起作用，只是將紅色矩形放置在別的地方。

有沒有辦法向上擴展？

或

甚至使用作爲縮放點的黃色矩形的位置？

或

用黃色矩形作爲按比例父爲紅色的嗎？

不能包裹我的頭 - 我對SVG相當陌生。任何答案表示讚賞！

感謝，塞巴斯蒂安

來源

2014-03-25 seniormartinez

有可能是幾種不同的方法，不知道這是最好的，但它的一個解決方案，我想反正。如果您縮放（1，-1）並用平移調整矩形。您可以將比例/翻譯移動到外部元素，而我猜也是。

<rect id="red_rect" x="77.047" y="16.375" fill="#FF0000" stroke="#000000" stroke-width="5" stroke-miterlimit="10" width="45.906" height="183.625" 
    transform="translate(0,216.375) scale(1,-1)">

jsfiddle

來源

2014-03-25 15:44:26 Ian

哇！那很整齊！沒有說明這麼小的變化。但你是如何得到這個翻譯（0,216.375）？我的意思是這個數字...... – seniormartinez

謝謝！順便一提。 – seniormartinez

對不起，我自己。正如你所說：它移動矩形。 – seniormartinez

SVG動畫 - 如何改造縮放點

回答

相關問題