Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Animation 如何设置svg矩形的动画以使其增长_Animation_Svg - Fatal编程技术网
Fatal编程技术网
  • animation/
  • Animation 如何设置svg矩形的动画以使其增长

Animation 如何设置svg矩形的动画以使其增长

animation svg

Animation 如何设置svg矩形的动画以使其增长,animation,svg,Animation,Svg,我正在尝试使svg增长，作为一个基本的条形图，从零增长到27.5的高度，例如，我希望它从下到上动画化 我尝试了以下代码，但它使矩形从上到下而不是从下到上（0高度->27.5高度）增长 要从下到上设置动画，您必须同时沿y轴向上移动矩形 <rect id="barchart1" x="148.8" y="190" fill="#921930" width="39.8" height="27.5"> <animate attributeName="height" from

我正在尝试使svg增长，作为一个基本的条形图，从零增长到27.5的高度，例如，我希望它从下到上动画化

我尝试了以下代码，但它使矩形从上到下而不是从下到上（0高度->27.5高度）增长



要从下到上设置动画，您必须同时沿y轴向上移动矩形


<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"/>
    <animate attributeName="y" from="190" to="162.5" dur="3s" fill="freeze"/>
</rect>





我想你会发现使用
变换
属性来获得你想要的坐标系要容易得多，而不是同时设置两个属性的动画

在此示例中，已设置动画的
元素被包装在以下
元素中：


<g transform="scale(1,-1) translate(0,-200)">
  ...
</g>



我在Firefox上的动画效果很好。它在Firefox中工作，是的。问题是它从上到下进行动画，但我希望它从零增长到27.5的高度（例如，与它在JSFIDLE中所做的相反）。嗨，这部分是我想要的。。。但我希望矩形保持在相同的位置因此，它保持在相同的x和y位置，但只有矩形的高度会从零开始动画并增长到27.5，除非没有其他选择，否则这两种动画都会让人感觉有些笨拙。@Ushka然后只需删除与y位置相关的第二个
动画
标记非常感谢，这就成功了！我必须调整翻译以使其与我的特定用例一起工作，因为我已经将Illustrator文件导出为SVG，并且随后我正在调整代码。

<g transform="scale(1,-1) translate(0,-200)">
  ...
</g>