Question

是否可以轻松定义在svg grafik中沿曲线定义的偏移量重复的短文本？我是否必须为此目的使用模式，或者是否存在textpath元素的属性（我无法在google上找到某些内容）

Answer 1

如果您希望在路径中包含特定的预定义偏移量，则需要拥有<textPath>元素的多个副本，并且startOffset值不同。

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

SVG文本路径重复文本

1 个答案: