動畫的SVG組

Question

目前，我有以下SVG：

<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300"> 
    <g transform="translate(75 75)" opacity="1"> 
     <ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse> 
     <g class="rotatable" style="transform: rotate(5.497787143782138rad); transition: transform 2s;"> 
      <rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect> 
      <rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect> 
      <rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect> 
     </g> 
    </g> 
</svg> 

我目前動畫上g.rotatable旋轉，但是我想如果可能的話用<animateTransform>，我還沒有想出如何。

我試過把它放在組的開頭，在它的底部，甚至在它之後，但是沒有任何影響。

<animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315deg;90deg;200deg;315deg" calcMode="linear"></animateTransform> 

因爲我從來沒有真正與SVG合作或動畫他們，我不知道我要去哪裏錯了。

svg.tower .rotatable { 
    animation: tower 5s linear infinite; 
} 

@keyframes tower { 
    0% { 
     transform: rotate(315deg); 
    } 
    40% { 
     transform: rotate(90deg); 
    } 
    75% { 
     transform: rotate(200deg); 
    } 
    100% { 
     transform: rotate(315deg); 
    } 
} 

以上是我當前的CSS動畫。

有誰能告訴我我哪裏出錯了，所以我可以修復我的錯誤，或者甚至可能，所以我可以放棄這一行動。

Answer 1

注：您可能需要使用SMIL動畫，而不是CSS動畫，因爲Chrome has deprecated support for SMIL animations from v45重新考慮。

有代碼中的兩個問題，它們是：

1. 在SVG的rotate transform只是重視程度數量值，不需要在deg後綴被添加到它。此外，還可以指定變換原點（參數2 ^和和3 ^rd參數），但它不是強制性的。
2. .rotatable元素上有style='transform: rotate(...)'。 CSS覆蓋了animateTransform，所以你不會看到任何旋轉。避免這個style設置。如果需要初始輪轉，則可以使用SVG的transform屬性。

下面是一個工作演示：

<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300"> 
 
    <g transform="translate(75 75)" opacity="1"> 
 
    <ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse> 
 
    <g class="rotatable" transform="rotate(315)"> 
 
     <rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect> 
 
     <rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect> 
 
     <rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect> 
 
     <animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315;90;200;315" calcMode="linear"></animateTransform> 
 
    </g> 
 
    </g> 
 
</svg>