为SVG内群组添加CSS动画后SVG位置偏移该如何解决

CSS设置的transform属性会直接覆盖SVG元素标签上原生书写的transform属性，二者不会自动叠加。
你代码中.light对应的群组标签本身自带transform="rotate(36 263.423 810.556)"旋转变换，动画中直接写入transform: translateY()时，会完全替换掉原本的旋转变换规则，最终导致元素位置偏移。position: absolute调整的是定位规则，根本没有解决变换属性被覆盖的问题，自然不会生效。

两种方案任选其一即可：

方案1：将原有SVG变换合并到CSS动画中 #

把g标签原本的旋转规则迁移到CSS中，和位移动画做叠加，避免CSS transform覆盖原生属性。修改后的CSS代码如下：

.light {
    transform-origin: 263.423px 810.556px; /* 和原rotate的旋转中心保持一致 */
    transform: rotate(36deg); /* 写入原本的旋转变换 */
    -webkit-animation: action 1s infinite alternate;
    animation: action 1s infinite alternate;
}

@-webkit-keyframes action {
    0% {
        transform: rotate(36deg) translateY(0);
    }
    100% {
        transform: rotate(36deg) translateY(-10px);
    }
}

@keyframes action {
    0% {
        transform: rotate(36deg) translateY(0);
    }
    100% {
        transform: rotate(36deg) translateY(-10px);
    }
}

使用该方案时可以删掉<g>标签上原生书写的transform="rotate(36 263.423 810.556)"属性，避免和CSS规则冲突。

方案2：使用SVG原生动画标签实现效果 #

直接在群组标签内加SVG原生的<animate>标签做动画，通过属性设置让动画和原有变换叠加，不会产生覆盖问题。代码修改如下：

<g
    class="light"
    data-name="Group 1182"
    transform="rotate(36 263.423 810.556)"
>
    <!-- 新增下方动画标签即可，其余原有g内元素无需修改 -->
    <animate 
        attributeName="transform" 
        attributeType="XML" 
        type="translate" 
        values="0,0;0,-10" 
        dur="1s" 
        repeatCount="indefinite" 
        alternate="true" 
        additive="sum"
    />
    <!-- 原有path、circle等元素保持不变 -->
</g>

其中additive="sum"属性的作用就是让新增的位移动画和原有rotate变换做叠加，不会覆盖原有变换规则，也就不会出现位置偏移。

内容的提问来源于stack exchange，提问作者tinaa