SVG <textPath>-Element

Das SVG <textpath>-Element wird verwendet, um Text entlang eines Pfades (z.B. eines Kreises) anzuordnen, was ein sehr cooler Effekt ist. Die Art und Weise, wie verschiedene Browser Text entlang eines Pfades darstellen, variiert leicht, daher stellen Sie sicher, dass der Text im unterstützten Browser korrekt angezeigt wird.

Online-Beispiel

<svg     width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1　0 0,0　100,0"　/>　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com Grundkurs...</textPath>　　　　
</text>　　　　
</svg>

Nach dem Lauf Bildeffekt:

Beobachten Sie, wie der <path>-Element (im Element <defs>) die id-Eigenschaft hat. Der Wert dieser id-Eigenschaft wird vom xlink:href-Attribut des Elements referenziert, das <textpath> enthält.

Wenn die Länge des Pfades kürzer ist als die Länge des Textes, wird nur der Teil des Textes gezeichnet, der im Bereich der Pfadverlängerung liegt.

Sie können auch eine fortgeschrittene Pfade verwenden. Dies ist ein Beispiel für einen komplexen Textpfad:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20 l100,0 l100,30 q0,100　150,100"/>
　　　　</defs>
　　　　<text x="20" y="40" style="stroke: #000000;">
　　　　　　　　<textPath xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　Grund教程....
　　　　　　　　</textPath>
　　　　</text>
</svg>

Dieser Beispiel definiert einen Textpfad, der aus einer waagerechten Linie, einer Diagonale und einer Kurve besteht.

Nach dem Lauf Bildeffekt: