SVG元素rotate与scale动画无法同时生效问题求助

你的问题出在两个动画没有设置叠加模式，且分别放在不同的<g>容器里，导致后一个动画覆盖了前一个的变换效果。要让旋转和缩放同时生效，只需做两个调整：

• 把两个<animateTransform>放在同一个目标元素下（比如和<path>同级的<g>里）
• 给每个动画加上additive="sum"属性，让变换效果叠加而非覆盖

修改后的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1000px" height="1000px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 1000 1000"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>

<polyline id="shape1" fill="none" stroke="black" stroke-width="2.36" stroke-miterlimit="22.9256" points="498.93,-1.28 498.93,998.72 -1.07,498.72 998.93,498.72 "/>

<g>
  <g>
    <path id="kol1" fill="#75578C"  fill-rule="nonzero" d="M499.85 462.64c-3.99,0 -5.97,4.89 -3.09,7.66 0.83,0.8 1.93,1.24 3.09,1.24 2.61,0.01 5.11,0.34 7.63,1.04 3.87,1.03 7.03,-3.13 4.97,-6.61 -0.61,-0.99 -1.51,-1.67 -2.64,-1.99 -3.28,-0.9 -6.57,-1.33 -9.96,-1.34zm-26.1 25.9c0.61,-1.41 0.46,-3.02 -0.4,-4.29 -1.97,-2.89 -6.35,-2.49 -7.76,0.72 -1.39,3.15 -2.28,6.29 -2.79,9.69 -0.56,4.13 4.34,6.71 7.42,3.9 0.78,-0.72 1.24,-1.61 1.4,-2.66 0.48,-2.71 1.01,-4.83 2.13,-7.36zm-8.16 -3.57l-2.79 9.69 8.82 1.24 -6.03 -10.93zm24 41.74c-1.51,-0.57 -3.16,-0.3 -4.41,0.71 -2.64,2.16 -1.95,6.41 1.24,7.61 3.2,1.22 6.4,1.96 9.8,2.31 1.65,0.16 3.29,-0.64 4.18,-2.04 1.77,-2.82 -0.02,-6.5 -3.34,-6.83 -2.59,-0.25 -5.04,-0.83 -7.47,-1.76zm37.35 -17.68c-0.42,1.34 -0.22,2.75 0.57,3.9 2.12,3.04 6.73,2.36 7.9,-1.15 1.06,-3.22 1.67,-6.52 1.83,-9.9 0.15,-4.18 -4.94,-6.26 -7.76,-3.18 -0.7,0.78 -1.09,1.73 -1.14,2.78 -0.12,2.59 -0.59,5.09 -1.4,7.55z"/>
    <!-- 缩放动画，添加叠加属性 -->
    <animateTransform attributeName="transform"
                      type="scale"
                      values="1;0.5; 1;0.5; 1"
                      dur="10s"
                      repeatCount="indefinite"
                      additive="sum"/>
    <!-- 旋转动画，添加叠加属性 -->
    <animateTransform attributeName="transform"
                      type="rotate"
                      from="0 500 500" to="360 500 500"
                      dur="10s"
                      repeatCount="indefinite"
                      additive="sum"/>
  </g>
</g>
</g>
</svg>

原理说明 #

• additive="sum"会让SVG将当前动画的变换与已有的变换叠加，而不是替换之前的变换效果
• 把两个动画放在同一个元素下，确保它们都作用在同一个目标上，避免因容器层级导致的效果冲突

内容的提问来源于stack exchange，提问作者Чудо Юдо