如何使用SVG <animateMotion>实现自定义多边形沿指定路径平滑移动？

你的三角形移动表现和圆形不同，核心原因是默认的animateMotion未让图形跟随路径方向旋转，且三角形的锚点对齐方式不合理。可通过以下调整实现平滑移动：

• 让图形跟随路径方向旋转：在三角形的animateMotion标签中添加rotate="auto"，这样三角形会沿着路径切线方向自动旋转，避免转角处的突兀跳转。
• 修正三角形锚点：将三角形顶点调整为以原点为中心，移除额外的transform="translate(-20, -16.67)"，确保图形中心与路径对齐，移动时更贴合路径轨迹。

调整后的完整代码：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" style="border:1px solid blue">
    <path
        id="motionPath"
        fill="none"
        stroke="gray"
        stroke-width="2"
        d="M20,50 L40,20 80,90 110,50" />

    <circle r="5" fill="red">
        <animateMotion dur="8s" repeatCount="indefinite">
            <mpath href="#motionPath"/>
        </animateMotion>
    </circle>
    
    <!-- 调整后的三角形 -->
    <polygon points="0,-5 -5,5 5,5" fill="red">
        <animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
            <mpath href="#motionPath"/>
        </animateMotion>
    </polygon>
</svg>

如果还想进一步提升流畅度，可将路径的L折线命令替换为C（三次贝塞尔曲线）或S（平滑贝塞尔曲线）命令，让路径转角过渡更自然。

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