SVG textpath repeat text - svg

Question

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)

Answer 1

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>