SVG 中的路径 - 如何为大小（宽度和高度）设置动画？答案

【问题标题】：Path in SVG - How can I animate the size (width & height)?SVG 中的路径 - 如何为大小（宽度和高度）设置动画？
【发布时间】：2016-06-07 18:06:42
【问题描述】：

嗨 :) 我有这条路 :

<path
    d="m 174.9224,966.45581 c -38.65022,-10.12183 -70.0542,-35.4199 -86.989048,-70.07555 -17.75086,-36.32539 -17.68994,-73.65983 0.17925,-109.91102 15.654678,-31.75858 48.161698,-57.84914 83.865538,-67.31169 26.7339,-7.08515 64.46493,-4.90298 95.7109,5.5355 23.44622,7.83279 22.09801,5.55586 22.09801,37.31964 0,15.5025 -0.74468,27.3553 -1.68623,27.3553 -0.94153,0 -7.70835,-3.22751 -15.06862,-7.17237 -26.39527,-14.14682 -52.28239,-19.96544 -73.77782,-16.58307 -26.2927,4.13733 -47.77408,19.30683 -59.09339,41.73022 -30.62476,60.66726 22.93861,125.90664 91.54491,111.50045 12.436,-2.6114 33.98564,-12.49644 45.21874,-20.74226 4.83201,-3.54711 9.70285,-6.44929 10.82398,-6.44929 1.4092,0 2.03843,8.4163 2.03843,27.26492 0,27.1414 -0.0212,27.28164 -4.71833,30.97627 -6.64505,5.22696 -30.16046,13.96797 -46.80307,17.39726 -19.2135,3.95895 -46.4082,3.60084 -63.34325,-0.83431 z"
    id="letterC"
    inkscape:connector-curvature="0"
    sodipodi:nodetypes="sssssszssssssssss"
/>

这条路径代表字母 C，我想用动画调整它的大小。我尝试使用<animateTransform> 没有成功...

<animationTransform xlink:href="#letterC" attributeType="CSS" attributeName="width" from="500px" to="20px" dur="5s"/>

我成功地使用 CSS3 为其他属性设置动画，例如填充和描边，但我不明白为什么我不能调整我的字母大小！有什么线索吗？

【问题讨论】：

然后让我们看看你的 animateTransform。
animateTransform （顾名思义）只能为变换属性设置动画。请注意，路径元素没有宽度属性。尝试为比例变换设置动画。
是的，谢谢！我用 CSS3 发布我的解决方案；）

标签： css svg

【解决方案1】：

我成功地用这个（在 CSS3 中）修改我的大小：

#letterC {
 -moz-transition: transform 2s ease-in-out 0s;
 -webkit-transition: transform 2s ease-in-out 0s;
 -o-transition: transform 2s ease-in-out 0s;

 transform: scale(1);
}

#letterC:active {
  transform: scale(0.5);
}

不需要animate 或animateTransform

【讨论】：