如何用 SVG 实现沿路径循环滚动的文本跑马灯（Marquee）-html教程-PHP中文网

如何用 SVG 实现沿路径循环滚动的文本跑马灯（Marquee）

本文详解如何在 SVG 中创建沿自定义路径无限循环滚动的文本效果，解决 startOffset 无法通过 CSS 动画控制、文本不可见等常见问题，并提供可直接运行的完整代码与关键注意事项。

本文详解如何在 svg 中创建沿自定义路径无限循环滚动的文本效果，解决 `startoffset` 无法通过 css 动画控制、文本不可见等常见问题，并提供可直接运行的完整代码与关键注意事项。

SVG 中的元素支持将文本沿任意排列，但实现平滑、无限循环的路径跑马灯需避开两个典型陷阱：一是文本因超出 SVG 可视区域（viewBox）而不可见；二是 startOffset 属于 SVG DOM 属性，不支持 CSS @keyframes 动画——必须使用 SVG 原生元素驱动。

以下为可直接运行的完整解决方案：

<svg viewbox="-50 -50 550 650" width="500" height="600" xmlns="http://www.w3.org/2000/svg"><!-- 定义路径（闭合曲线，确保文本流畅循环） --><path id="textPathCurve" d="M1.02632 392.868L1.02612 207.995C1.02612 115.501 73.223 0.986328 209.439 0.986328C345.655 0.986328 422.088 119.564 422.088 207.995L419.299 390.079C419.299 473.617 346.07 590.261 212.692 590.261C66.9114 590.261 1.02632 460.671 1.02632 392.868Z" fill="none" stroke="#ccc" stroke-width="1"></path><!-- 文本容器 + 沿路径排布 + 关键动画 --><text font-family="Arial, sans-serif" font-size="18" fill="black"><textpath href="#textPathCurve" startoffset="100%">
      JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT >
      <!-- 使用 SVG animate 驱动 startOffset 属性 -->
      <animate attributename="startOffset" from="100%" to="-100%" begin="0s" dur="10s" repeatcount="indefinite"></animate></textpath></text></svg>

✅ 关键要点说明：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

viewBox 必须足够宽裕：原始 SVG 缺少 viewBox 或范围过小，导致路径外侧文本被裁剪。示例中设为 viewBox="-50 -50 550 650"，为路径留出上下左右安全边距。
startOffset 动画必须用 ：CSS 无法监听或修改 startOffset 这一 SVG 属性，必须使用并指定 from/to 值（注意单位用 %）。
起始偏移建议设为 100%：使文本初始状态完全位于路径末端，动画开始后向左“驶入”，视觉更自然；若设为 0%，文本会从路径起点突然出现。
重复内容增强循环感：文本内容重复 2–3 次（如 JOIN... > JOIN... >），配合 -100% 终点，可消除衔接缝隙。

⚠️ 注意事项：

路径应尽量平滑且首尾连贯（本例为闭合路径），避免尖角处文本变形或跳变；
若需响应式适配，建议用 width="100%" height="auto" 配合 viewBox，而非固定像素宽高；
现代浏览器均支持，但旧版 IE 不支持——如需兼容，需借助 JavaScript（如 requestAnimationFrame + getTotalLength() + getPointAtLength() 计算位置）。

掌握此方法后，你可自由替换为任意形状（心形、环形、波浪线等），轻松实现品牌动态标识、数据可视化标签流等专业效果。