SVG text-path文字独立wobble动画失效问题求助

我正在制作一个用于Stream Elements的播报提醒组件，需求是让动态用户文本适配SVG曲线路径，同时为每个字符添加独立的wobble摇摆动画。普通文本排版时动画可正常作用于单个字符，但使用text-path沿曲线路径排列时，动画要么完全失效，要么整体作为一个文本块动效，无法实现字符独立动画。

解决方案：使用SVG animateTransform 实现字符独立摇摆 #

核心原因 #

SVG的text-path布局系统会接管字符的定位逻辑，CSS transform动画在这个上下文里无法正确作用于单个字符。改用SVG原生的animateTransform元素，能直接在SVG坐标系内控制每个字符的动画，避免路径布局的干扰。

修改后的完整代码 #

HTML

<div class="text-container">
    <div class="awsome-text-container">
        <svg width="100%" height="100%" viewBox="0 0 200 400" preserveAspectRatio="xMidYMid meet">
            <path id="curve" d="M -35,50 L-35,325 Q-35,375 65,375 L175,375" fill="transparent" stroke="black" stroke-width="2"/>
            <text font-size="85px">
                <textPath id="username-container" href="#curve"></textPath>
            </text>
        </svg>
    </div>
    <p>{{message}}</p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Caprasimo');

* {
    font-family: 'Caprasimo', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.awsome-text-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
    height: 400px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.text-container {
    font-size: 16px;
    color: black;
    text-align: center;
    margin: auto;
}

JavaScript

function stringToAnimatedSVG(s) {
    const stringAsArray = s.split('');
    const animationDuration = 1500; // 动画时长（毫秒）

    return stringAsArray.map((letter) => {
        const randomDelay = Math.random() * 1000; // 0-1秒随机延迟
        // 对应原CSS wobble动画的关键帧参数
        const keyframes = [
            { offset: 0, tx: 0, rotate: 0 },
            { offset: 0.15, tx: -2, rotate: -2 },
            { offset: 0.3, tx: 2, rotate: 2 },
            { offset: 0.45, tx: -1.5, rotate: -1.5 },
            { offset: 0.6, tx: 1.5, rotate: 1.5 },
            { offset: 0.75, tx: -1, rotate: -1 },
            { offset: 0.9, tx: 1, rotate: 1 },
            { offset: 1, tx: 0, rotate: 0 }
        ];

        // 拼接动画关键帧参数字符串
        const translateValues = keyframes.map(k => `${k.tx},0`).join(';');
        const rotateValues = keyframes.map(k => `${k.rotate}deg`).join(';');
        const keyTimes = keyframes.map(k => k.offset).join(';');

        return `
            <tspan>
                ${letter}
                <!-- 横向平移动画 -->
                <animateTransform
                    attributeName="transform"
                    type="translate"
                    values="${translateValues}"
                    keyTimes="${keyTimes}"
                    calcMode="linear"
                    begin="${randomDelay}ms"
                    dur="${animationDuration}ms"
                    repeatCount="indefinite"
                    additive="sum"
                />
                <!-- 旋转动画 -->
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    values="${rotateValues}"
                    keyTimes="${keyTimes}"
                    calcMode="linear"
                    begin="${randomDelay}ms"
                    dur="${animationDuration}ms"
                    repeatCount="indefinite"
                    additive="sum"
                    origin="center"
                />
            </tspan>
        `;
    }).join('');
}

const name = '{{name}}';
const userNameContainer = document.querySelector('#username-container');
userNameContainer.innerHTML = stringToAnimatedSVG(name);

关键细节说明 #

1. SVG动画替代CSS：用animateTransform直接操作SVG元素的transform属性，适配text-path的布局逻辑
2. 动画叠加：通过additive="sum"让平移和旋转动画同时生效，origin="center"保证旋转围绕字符中心进行
3. 随机延迟：每个字符的动画启动时间随机，保留原需求中错落摇摆的效果
4. 参数对齐：完全复刻原CSS wobble动画的关键帧参数，保证动画效果一致

内容的提问来源于stack exchange，提问作者Iván Pérez