如何为SVG矩形制作动画 [英] How to animate svg rect to grow
问题描述
我正尝试使svg增长,作为一个基本的条形图,它从零增长到27.5的高度,例如我希望它从底部到顶部进行动画
I'm trying to make an svg grow, as a basic bar chart that is growing from zero to the height of 27.5, e.g. I want it to animate from bottom to top
我尝试了以下代码,但是它使矩形从顶部到底部而不是从底部到顶部(0高度->高度27.5)。
I tried the following code but it makes the rectangle grow from top to bottom, rather than bottom to top (0 height -> 27.5 height).
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
id="MAIN"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1190.6 841.9"
enable-background="new 0 0 1190.6 841.9"
xml:space="preserve">
<rect
id="barchart1"
x="148.8"
y="190"
fill="#921930"
width="39.8"
height="27.5">
<animate
attributeName="height"
from="0"
to="27.5"
dur="3s"
fill="freeze"/>
</rect>
</svg>
推荐答案
我认为您不必同时设置两个属性的动画'首先会发现使用 transform
属性更容易获得所需的坐标系。
Instead of animating two attributes simultaneously, I think you'll find it much easier to use a transform
attribute to get the coordinate system you wanted in the first place.
在此示例中,动画的< rect>
元素包装在以下< g>
元素中:
In this example, the animated <rect>
elements are wrapped in the following <g>
element:
<g transform="scale(1,-1) translate(0,-200)">
...
</g>
scale
转换将所有y坐标颠倒过来,然后 translate
变换会移动坐标,以使 y = 0
在SVG画布的底部。
The scale
transform turns all the y coordinates upside down, and the translate
transform shifts the coordinates so that y=0
is at the bottom of the SVG canvas.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>
<rect x="150" y="0" fill="#f70" width="100" height="200">
<animate attributeName="height" from="0" to="200" dur="0.5s" fill="freeze" />
</rect>
<rect x="250" y="0" fill="#ec0" width="100" height="150">
<animate attributeName="height" from="0" to="150" dur="0.5s" fill="freeze" />
</rect>
</g>
</svg>
这篇关于如何为SVG矩形制作动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!