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动画 - 如何改造缩放点

回答

相关问题