Besuchen Sie unseren Adventskalender 2022!
SVG/Elemente/text
Aus SELFHTML-Wiki
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>
Siehe auch
Weblinks
- W3C: TextElement
Syntax | Start-Tag: notwendig End-Tag: notwendig <text>…</text> |
---|---|
Elternelemente | Darf vorkommen in: |
erlaubte Inhalte |
Animations-ElementeAnimations-Elemente
Information: Animationselemente (SVG) Elemente, die verwendet werden können um Eigenschaften oder Werte anderer Elemente zu animieren
|
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
id="eins"
) hat die gleiche y-Koordinate wie die Linie - während die Linie sie aber als oberen Rand ansieht, ist es beimtext
-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.