css - SVG 中的路径 - 如何设置大小(宽度和高度)的动画？

Question

嗨:)我有这条路:

<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 为其他属性设置了动画，例如填充和描边，但我不明白为什么我无法调整字母大小!有线索吗？

Answer 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