基于jQuery实现波浪路径文本滚动并添加悬停停止功能

你原代码存在几个核心问题，导致无法正常运行：

• 旧版SVG的xlink:href兼容性较差，现代SVG标准应使用href属性
• jQuery动画对SVG的startOffset属性支持不稳定，改用CSS动画更可靠
• 单次文本滚动结束后会出现空白，需要重复文本保证滚动连贯

以下是修复后的完整代码：

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
    <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
    <text white-space="nowrap">
        <textPath href="#curve">*The pictures are not technically selfies. *The pictures are not technically selfies. *The pictures are not technically selfies.</textPath>
    </text>
</svg>

<style>
    @keyframes scrollAlongPath {
        0% {
            startOffset: 100%;
        }
        100% {
            startOffset: -200%;
        }
    }

    textPath {
        animation: scrollAlongPath 20s linear infinite;
        fill: #333; /* 可自定义文本颜色 */
        font-size: 16px; /* 可自定义文本大小 */
    }
</style>

关键修复说明： #

1. 替换xlink:href为href：符合现代SVG规范，提升浏览器兼容性
2. 改用CSS动画：startOffset是SVG原生支持的可动画属性，CSS动画比jQuery更高效稳定
3. 重复文本内容：避免滚动到末尾出现空白，保证循环滚动的连贯性
4. 添加white-space="nowrap"：强制文本不换行，确保沿路径完整显示

自定义调整建议： #

• 修改animation中的20s参数调整滚动速度，数值越小速度越快
• 调整font-size和fill属性自定义文本样式
• 修改path的d属性可以改变波浪路径的形状

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