Question

我试图从下边缘为矩形的高度设置动画，使其随着时间的推移而向上扩展而不是向下（从其原始原点）

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

感谢，塞巴斯蒂安

Answer 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

SVG动画 - 如何转换缩放点

1 个答案: