SVG 动画 - 如何转换缩放点答案

【问题标题】：SVG animate - how to transform scaling-pointSVG 动画 - 如何转换缩放点
【发布时间】：2014-05-03 12:18:18
【问题描述】：

我正在尝试从矩形的下边缘为矩形的高度设置动画，以便它随着时间向上而不是向下（从其原始原点）缩放

这是 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 还很陌生。任何答案表示赞赏！

谢谢，塞巴斯蒂安

【问题讨论】：

标签： xml svg

【解决方案1】：

可能有几种不同的方法，不确定这是最好的，但我认为它是一种解决方案。如果您缩放（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

【讨论】：

哇！那很整齐！没有说明这么小的变化。但是你是怎么得到这个翻译的（0,216.375）？我的意思是那个数字...
抱歉，我自己弄的。正如你所说：它移动矩形。