SVG <text> Text

SVG-Element

Um Text zu zeichnen, verwenden Sie das <text>-Element.

　　　　　　<h1>SVG-Text</h1>
　　　　　　<svg width="550" height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40"　y="23"Text: </text>
　　　　　　　　　　　　<text x="40"　y="40" fill="rgb(121,0,121)">de.oldtoolbag.com Grundanleitung </text>
　　　　　　　　　</g>　
　　　　　　</svg>

Nach dem Ausführen sieht das Ergebnis wie folgt aus:

SVG-Text

Verwendungserklärung

x: Es definiert die Position des oberen linken Ecks des Textes.

y: Es definiert den oberen Textposition.

width: Definiert die Breite.

height: Definiert die Höhe.

fill: Die fill-Eigenschaft wird verwendet, um die Füllfarbe zu definieren.

Gedrehter Text

Es wird verwendet, um rotierten Text zu erstellen.

<svg height="100" width="200">
　　<text x="0" y="15" fill="rot" transform="rotate(30　20,40)">de.oldtoolbag.com</text>
</svg>

Nach dem Ausführen sieht das Ergebnis wie folgt aus:

Verwendungserklärung

x: Definiert die Position des linken oberen Ecks.

y: Definiert die obere Position.

width: Definiert die Breite.

height: Definiert die Höhe.

fill: Die fill-Eigenschaft wird verwendet, um die Füllfarbe zu definieren.

Mehrzeiliger Text

Es wird verwendet, um mehrzeiligen Text zu erstellen. Mit dem <tspan>-Element können <text>-Elemente in einer beliebigen Anzahl von Untergruppen angeordnet werden.

<svg width="570" height="100">
　　<g>
　　<text x="40"　y="23"Mehrzeiliger Text: </text>
　　<text x="40"　y="40" fill="rgb(121,0,121)">de.oldtoolbag.com
　　　<tspan x="40"　y="60" font-weight="fett">Text als Link: </tspan>
　　　</text>
　　</g>
　</svg>

Nach dem Ausführen sieht das Ergebnis wie folgt aus:

Verwendungserklärung

x: Definiert die Position des linken oberen Ecks.

y: Definiert die obere Position.

width: Definiert die Breite.

height: Definiert die Höhe.

fill: Die fill-Eigenschaft wird verwendet, um die Füllfarbe zu definieren.

Hyperlink-Text

Es wird verwendet, um Text mit Hyperlinks zu erstellen.

　　　　　　<svg width="500" height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20"　y="10"Text als Link: </text>
　　　　　　　　　
　　　　　　　　　　　　<a　xlink:href="https://de.oldtoolbag.com/svg-tutorial"　target="_blank">
　　　　　　　　　　　　　　　<text　font-family="Verdana"　font-size="30"　x="40"　y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">de.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

Nach dem Ausführen sieht das Ergebnis wie folgt aus:

Verwendungserklärung

x: Definiert die Position des linken oberen Ecks.

y: Definiert die obere Position.

width: Definiert die Breite.

height: Definiert die Höhe.

fill: Die fill-Eigenschaft wird verwendet, um die Füllfarbe zu definieren.