SVG/Elemente/text

Der Begriff text ist mehrdeutig.
Siehe auch die JavaScript-Eigenschaft: options.text

Das text-Element stellt beliebigen Text in SVG als Text dar.

Im Unterschied zu anderen Grafikformaten steht Text in SVG zum Indizieren mit Suchmaschinen, Bearbeiten durch Scriptprogramme und zum Kopieren in die Zwischenablage zur Verfügung.

Beispiel

<text id="eins" x="10" y="120">TEXT in</text>
<line x1="10" y1="120" x2="400" y2="120" />
 
<text id="zwei" x="430 550 650" y="120 170 220">
  SVG
</text>

Der erste Text (id="eins") hat die gleiche y-Koordinate wie die Linie - während die Linie sie aber als oberen Rand ansieht, ist es beim text-Element die y-Position der Grundlinie.
Der zweite Text mit der id="zwei" hat mehrere Angaben zu den x- und y-Koordinaten, sodass die einzelnen Zeichen versetzt dargestellt werden.

Siehe auch

• SVG/Tutorials/Text

Weblinks

• W3C: TextElement

Syntax	Start-Tag: notwendig End-Tag: notwendig <text>…</text>
Elternelemente	Darf vorkommen in:
erlaubte Inhalte	a textPath tspan Animations-ElementeAnimations-Elemente Information: Animationselemente (SVG) Elemente, die verwendet werden können um Eigenschaften oder Werte anderer Elemente zu animieren Elemente: animate, animateMotion, animateTransform, set
Browsersupport	Details: {{{caniuse}}}

Attribute

Name	Inhalt	Standardwert	Bedeutung
Kernattribute
class	ID		ordnet ein Element einer oder mehreren Klassen zu.
id	ID		identifiziert ein einziges Element innerhalb eines Dokuments
lang	ID		identifiziert eine Sprachangabe
style	ID	CDATA	Stilangabe durch Präsentationsattribute
tabindex	ID		macht Element „antabbbar“
xml:base	CDATA		Basis-URL
xml:lang		Sprachkürzel	legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space		default, preserve	Verhalten gegenüber whitespace)
Präsentationsattribute
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
cursor
cx			(SVG2)
cy			(SVG2)
direction
display
dominant-baseline
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
height			(SVG2)
isolation
letter-spacing
lighting-color
mask
opacity
overflow
pointer-events
r			(SVG2)
rx			(SVG2)
ry			(SVG2)
text-anchor
text-decoration
unicode-bidi
visibility
word-spacing
writing-mode
width			(SVG2)
x			(SVG2)
y			(SVG2)
dx	CDATA	0px	Verschiebung der X-Position
dy	NAME	0px	Verschiebung der Y-Position
lengthAdjust	CDATA		ob nur Zeichenabstand oder auch Zeichen angepasst werden sollen
rotate	NUMBER		Winkelmaß der Rotation
textLength	NUMBER		Länge des Texts
transform	CDATA
x	NUMBER	0px	X-Position
y	NUMBER	0px	Y-Position

Attribut: Pflichtattribut
Attribut: optionales Attribut