Html 如何创建剪切到路径的循环文本字幕

发布于12月13日

总的来说，我对编码仍然缺乏经验，但我想要做的是创建一个无限的文本字幕，并将其剪切到SVG路径中

我试着四处看看，试了试.但我似乎无法让文本显示，以查看我的循环是否工作正常

这就是我目前所在的地方.

<svg 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" />

  <text font-family="Arial" font-size="18" fill="black">
    <textPath href="#textPathCurve" startOffset="100%">
      JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT >
    </textPath>
  </text>

  <style>
    @keyframes moveText {
      to {
        startOffset: -100%;
      }
    }

    textPath {
      animation: moveText 5s linear infinite;
    }
  </style>
</svg>

我的SVG正在显示，但是根本没有文本显示，以查看循环是否正常工作.

如有任何帮助，我们将不胜感激

<textPath href="#textPathCurve" startOffset="0%"> JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT > <animate attributeName="startOffset" from="100%" to="-100%" begin="0s" dur="10s" repeatCount="indefinite"></animate> </textPath>

Html 如何创建剪切到路径的循环文本字幕

推荐答案

Html相关问答推荐

有没有可能设置div的边框宽度相对于其父宽度和高度？'

放大缩小标题在外面的图像

在浮动元素旁边垂直居中

损坏的可点击html邮箱签名

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

如何使不断增长的div不溢出其包含固定div的父级

使用bash从html表格中提取表格

如何使用*ngFor将模板从父级传递到子级

如何使用css创建六边形棋盘？

有没有一种方法可以提高代码中tailwind 类名的可读性？

如何使单选按钮在被 Select /选中时看起来像这样的设计？

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果？

Angular：从服务器下载 HTML 并打印

如何截断一些文本并用双引号引起来？

单击时 HTML 锚元素不重定向到相对路径

是否可以设置用户在联系表单中输入的文本字体的样式

在中心而不是边界处填充 svg 的背景

如何使列表的第一个元素比 css 中的其他元素大？

沿文本对齐双引号