CODEWITHSUNDEEP
svg
arget888
arget888

Reputation: 69

SVG textpath repeat text

Is it possible to easily define a short text which is repeated in an defined offset along a curve in an svg grafik? Did i have to use patterns for that purpose or is there a attribute for the textpath element (I couldn't find something at google)

Upvotes: 2

Views: 1558

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

If you want to have specific predefined offsets along the path, you will need to have multiple copies of the <textPath> element with different startOffset values.

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

Or if instead you wanted to have specific gaps between the words, rather than placing them at specific offsets, you can use dx on <tspan> to set the word spacings.

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

Upvotes: 3

Related Questions