SVG旋转动画未居中：animateTransform中点定位问题求助

你的问题出在几个关键细节上，逐个拆解修复：

核心问题点 #

• 旋转中心点前后不一致：from用了480 450，to却改成30 450，旋转中心跳来跳去自然没法居中
• 嵌套SVG导致坐标混乱：外层SVG尺寸仅35x50，内层SVG的viewBox是1 1 750 730，内外层的缩放比例会让你对旋转中心点的判断完全失效
• additive="sum"属性画蛇添足：这个属性会叠加变换，反而可能引入额外偏移，此处不需要

修复步骤 #

1. 固定旋转中心点：从path的路径数据来看，这个星形的设计中心是(375, 365)（对应内层SVG viewBox的中心：宽750的一半是375，高730的一半是365），所以from和to里的中心点要统一用这个值
2. 清理嵌套SVG结构：没必要套两层SVG，把尺寸属性移到带viewBox的内层SVG上即可，避免缩放混淆
3. 移除无效属性：删掉additive="sum"，用默认的replace模式就能正常旋转
4. 处理无效<use>标签：你引用的#star1没有定义，要么补上元素定义要么删除该标签，避免无效代码

修复后的完整代码 #

<html>
<body>
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="1 1 750 730" width="35px" height="50px">
        <g>
            <path d="m375,0l-108.48,159.39-192.25-14.56,56.98,184.19L0,470.24l179.53,70.29,28.58,190.67,166.89-96.54,166.89,96.54,28.58-190.67,179.53-70.29-131.25-141.23,56.98-184.19-192.25,14.56L375,0Z"/>
            <!-- 统一旋转中心点为星形设计中心，移除多余属性 -->
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" 
                             from="0 375 365" to="360 375 365" 
                             dur="8.8s" repeatCount="indefinite" />
        </g>
        <!-- 若需使用<use>，先定义#star1元素，示例如下（可根据需求调整） -->
        <!-- <path id="star1" d="m375,0l-108.48,159.39-192.25-14.56,56.98,184.19L0,470.24l179.53,70.29,28.58,190.67,166.89-96.54,166.89,96.54,28.58-190.67,179.53-70.29-131.25-141.23,56.98-184.19-192.25,14.56L375,0Z"/>
        <use transform="matrix(0.1, 0, 0, 0.1, 20, 10)" href="#star1" /> -->
    </svg>
</body>
</html>

额外说明 #

旋转中心点的坐标是相对于当前元素所在的SVG坐标系（也就是内层的viewBox），必须基于这个坐标系设置数值，不能凭视觉随意调整。如果一定要保留嵌套SVG，必须确保外层SVG的viewBox与内层匹配，或者明确坐标转换关系，但一般不建议嵌套SVG，会徒增复杂度。

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