SVG文本路径重复文本

时间:2017-04-13 12:29:25

标签: svg

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

1 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

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

&#13;
&#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;
&#13;
&#13;