是否可以无限重复 SVG 文本路径的动画？ [复制]答案

【问题标题】：Is it possible to infinitely repeat the animation of a SVG text path? [duplicate]是否可以无限重复 SVG 文本路径的动画？ [复制]
【发布时间】：2021-07-14 06:41:25
【问题描述】：

我可以让文本绕着封闭的 SVG 路径爬行，但无法让文本继续爬过它的起点。我希望文本在路径周围无限爬行..

这个无限动画可以使用<textPath> 元素和startOffset 属性吗？

您可以在this video 中看到我想要实现的目标。我正在使用 JavaScript 来增加 startOffset 的值。一旦到达原始起点 (startOffset="0")，文本就会“隐藏”。

我想使用带有真实文本（而不是序列或电影）的 SVG，因为形状（最终）会根据观看者的视口大小而动态变化。

const textPath = document.querySelector("#text-path");

let increment = 0;

window.setInterval(function () {
  increment += 1;
  textPath.setAttribute("startOffset", + increment);
}, 1);

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');

body {
  margin: 5rem;
  font-family: 'Work Sans', sans-serif;
}

text {
  font-size: 30px;
  text-transform: uppercase;
}

svg {
  /* Needed to show text that goes beyond viewBox */
  overflow: visible;
}

<svg width="440" height="440" viewBox="0 0 440 440" fill="transparent" xmlns="http://www.w3.org/2000/svg">
<path d="M40 0.5H400C421.815 0.5 439.5 18.1848 439.5 40V400C439.5 421.815 421.815 439.5 400 439.5H40C18.1847 439.5 0.5 421.815 0.5 400V40C0.5 18.1847 18.1848 0.5 40 0.5Z" id="number-one" stroke="transparent" />
  <text width="100%" fill="black" >
      <textPath alignment-baseline="top" xlink:href="#number-one" id="text-path" startOffset="0">Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one.</textPath>
  </text>
</svg>

【问题讨论】：

我为你创建了一个Stack Snippet。这样用户就不必去外部站点，他们可以更轻松地重新创建 sn-p。如果有任何问题，请编辑 sn-p。
请看这个答案：stackoverflow.com/questions/56041826/…
感谢@enxaneta。这正是我一直在寻找的，只是用一种我在搜索中找不到的方式措辞。不幸的是，这种技术的性能对于我的实际使用来说太慢了，即使使用像requestAnimationFrame 这样的高性能技术也是如此。好奇你是否认为在这种情况下 WebGL 方法 (example) 会更好。谢谢。

标签： javascript svg

【解决方案1】：

尝试使用animate 元素和repeatCount 属性

<animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="20s" repeatCount="indefinite"/>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

const textPath = document.querySelector("#text-path");

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');
body {
  margin: 5rem;
  font-family: 'Work Sans', sans-serif;
}

text {
  font-size: 30px;
  text-transform: uppercase;
}

svg {
  /* Needed to show text that goes beyond viewBox */
  overflow: visible;
}

<svg width="440" height="440" viewBox="0 0 440 440" fill="transparent" xmlns="http://www.w3.org/2000/svg">
<path d="M40 0.5H400C421.815 0.5 439.5 18.1848 439.5 40V400C439.5 421.815 421.815 439.5 400 439.5H40C18.1847 439.5 0.5 421.815 0.5 400V40C0.5 18.1847 18.1848 0.5 40 0.5Z" id="number-one" stroke="transparent" />
  <text width="100%" fill="black" >
      <textPath alignment-baseline="top" xlink:href="#number-one" id="text-path" startOffset="0">Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one.
          <animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="20s" repeatCount="indefinite"/>
      </textPath>
  </text>
</svg>

【讨论】：

这是为startOffset 设置动画的更好方法，但它并不能解决文本在到达起点后隐藏的问题。 IE。它和我的原始代码有同样的问题。还是谢谢