Question

我正在学习如何使用HTML中的svg制作动画，并且需要在其轴上旋转椭圆，所以我该怎么做？

我唯一可以做的就是绕点x =“ 0” y =“ 0”旋转椭圆。

  <ellipse cx="500" cy="300" rx="80" ry="160" transform="rotate(<angle> 0 0)">
        <animateTransform 
          attributeName="transform"
          from="0"
          to="360"
          dur="10s"
          repeatCount="1"/>

Answer 1

尝试一下：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 480">
   <ellipse cx="240" cy="240" rx="80" ry="160">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 240 240"
                          to="360 240 240"
                          dur="10s"
                          repeatCount="indefinite"/>
</svg>

基本上，SMIL动画应指向形状的中心。如果是我的椭圆形，则为240,240（cx，cy）

如何使用svg使椭圆绕其轴旋转？

1 个答案: