SVG/Elemente/tspan

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

Das tspan-Element definiert eigene Text-Bereiche, die Sie entsprechend positionieren und layouten können. Das tspan-Element entspricht im Wesentlichen dem span-Element in HTML und kann beliebig innerhalb des text-Elements verwendet werden.

Gegenüber dem Einsatz mehrerer text-Elemente bietet tspan folgende Vorteile:

  • tspan-Elemente müssen nicht (können aber) neu positioniert werden.
  • die einzelnen tspan-Elemente gehören zusammen und können gemeinsam markiert werden
Beispiel
    <text x="40" y="40">
      <tspan id="eins">S</tspan>
      <tspan id="zwei">V</tspan>
      <tspan id="drei">G</tspan>
      <tspan dx="10" dy="80">in einer neuen Zeile ... (relativ positioniert)</tspan>
      <tspan x="10" y="175">und in noch einer ... (absolut positioniert)</tspan>
  </text>
Ohne Angabe einer x-Koordinate wird der tspan in Laufrichtung anschließend positioniert, dies kann durch die Angabe von dx und dy, sowie in der letzten Zeile durch die Angabe eines Werts für x und y geändert werden.


Weblinks

Start-Tag: notwendig
End-Tag: notwendig
<tspan>…</tspan>
Elternelemente Darf vorkommen in:

SVG/Elemente/text

erlaubte Inhalte
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 NUMBER 0px Verschiebung der X-Position
dy NUMBER 0px Verschiebung der Y-Position
lengthAdjust spacing
spacingAndGlyphs
legt fest, inwieweit die Werte auf textLength angepasst werden.
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