SVG 文本路径重复文本答案

【问题标题】：SVG textpath repeat textSVG 文本路径重复文本
【发布时间】：2017-04-13 21:53:23
【问题描述】：

是否可以轻松地定义一个短文本，该短文本在 svg grafik 中沿曲线的定义偏移量中重复？我是否必须为此目的使用模式，或者是否有 textpath 元素的属性（我在 google 上找不到东西）

【问题讨论】：

最简单的就是使用 javascript 重复我怀疑的文本内容。

标签： svg

【解决方案1】：

如果您希望沿路径具有特定的预定义偏移量，您将需要具有不同 startOffset 值的 <textPath> 元素的多个副本。

<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />

  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath" startOffset="0">Text</textPath>
  </text>
  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath" startOffset="200">Text</textPath>
  </text>
  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath" startOffset="400">Text</textPath>
  </text>
  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath" startOffset="600">Text</textPath>
  </text>
  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath" startOffset="800">Text</textPath>
  </text>

</svg>

或者，如果您想在单词之间设置特定的间距，而不是将它们放在特定的偏移处，您可以使用 dx on <tspan> 来设置单词间距。

<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />

  <text font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">Text
      <tspan dx="200">Text</tspan>
      <tspan dx="200">Text</tspan>
      <tspan dx="200">Text</tspan>
      <tspan dx="200">Text</tspan>
    </textPath>
  </text>

</svg>

【讨论】：

好的，这意味着 svg 没有像重复标签或 css 元素那样单独执行此操作的功能
没有。 SVG没有“自动重复文本”功能。