SVG-Tutorial

SVG-Element

SVG <textPath>-Element SVG <tspan>-Element

SVG <tref>-Element

Das SVG <tref>-Element wird verwendet, um auf Text zu verweisen, der durch das <defs>-Element definiert wurde. Auf diese Weise können Sie denselben Text mehrmals in einem SVG-Bild anzeigen, ohne dass Sie den <text>-Element mehrmals enthalten müssen.

Online Beispiel

Dies ist ein Beispiel:

Beispiel

<svg width="100%" height="100%" viewBox="0 0　1000　300"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="http:
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　Referenzzeichenkette Daten (oldtoolbag.com) </text>
　　</defs>
　　<text x="100" y="100" font-size="45" >
　　　　Inline Zeichenkette Daten (oldtoolbag.com) </text>
　　<text x="100" y="200" font-size="45" fill="red" >
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　<!--　Verwenden Sie das "rect"-Element, um den Kontur des Canvas anzuzeigen　-->
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/></svg>

Testen Sie, um zu sehen‹/›

Nach dem Lauf Bild Effekt:

Beachten Sie, wie der <text>-Element (im Element <defs>) die id-Eigenschaft hat. Der Wert dieser id-Eigenschaft wird vom xlink:href-Attribut des Elements referenziert. <tref>.

SVG <textPath>-Element SVG <tspan>-Element