SVG/Tutorials/Text/Füllungen und Randlinien

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

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• SVG


In diesem Kapitel wollen wir Ihnen zeigen, wie Sie SVG-Text mit CSS und XML-Attributen gestalten und animieren können. Dabei wollen wir zuerst die Möglichkeiten verschiedener Füllungen und Randlinien kennen lernen.

SVG-Markup[Bearbeiten]

Text in SVG

Um Text in SVG darzustellen, verwendet man das text-Element. Als Inhalt kann es entweder Klartext, tspan-Elemente als Unterbereiche oder ein textPath-Element für Text entlang eines unregelmäßigen Pfades enthalten.

Anders als in HTML richtet sich SVG-Text nicht am (in SVG nicht vorhandenen) Elementfluss aus, sondern muss immer wieder neu positioniert werden. Dies geschieht mithilfe der x- und y-Attribute:

  • x: Koordinate(n) des linken Textrandes (Wenn mehrere Werte in der Form "x1, x2, x3, ..., xn" bzw. "y1, y2, y3, ..., yn" angegeben werden, beziehen sie sich auf die einzelnen Zeichen.)
  • y: Koordinate(n) des Grundlinie des Textes. Die Unterlängen ragen nach unten, der Text nach oben.
Beachten Sie: Text ohne diese Angaben nimmt für diese Attribute einen Wert von 0, die Grundlinie (y="0") bewirkt, dass sich der Text außerhalb der normalerweise sichtbaren viewBox befindet.
SVG-Markup ansehen …
<text id="eins" x="10" y="120">
  TEXT 
  <tspan dy=".5em" >in</tspan>
</text>
 
<text id="zwei" x="430 550 650" y="120 170 220">
  SVG
</text>
Der erste Text (id="eins") hat als Inhalt Klartext und ein tspan-Element. Dieses ist mit dem dy-Attribut um 0.5em nach unten verschoben.

Der zweite Text mit der id="zwei" hat mehrere Angaben zu den x- und y-Koordinaten, sodass die einzelnen Zeichen versetzt dargestellt werden.
Die Grundlinie ist durch den roten Punkt gekennzeichnet.

Des Weiteren sind die text-Elemente mit CSS formatiert:
text {
  font-family:serif;	
  font-size: 120px;
  font-weight: bold;
}
#eins {
  fill: url(#verlauf);
  }
 
#zwei {
  fill: #ffebe6;
  stroke: #c32e04;
  stroke-width: 3;
  font-family: sans-serif;
  font-size: 160px; 
  font-weight: bold;
}

Wie Sie im Beispiel sehen, kann die fill-Eigenschaft viel mehr als eine Farbangabe verarbeiten: Im ersten Element wird ein Verlauf eingebunden; wie das funktioniert erfahren Sie im 2. Kapitel dieser Seite.

Gestaltung durch CSS[Bearbeiten]

SVG-Text: Formatierung mit CSS ansehen …
text {
  font-family:sans-serif;	
  font-size: 24px;
}

[role=heading] {
	font-size: 50px;
	text-anchor: middle;  
	fill: var(--yellow);
	stroke: var(--blue); 
	stroke-width: 2;  
}

[role=heading] >tspan {
	fill: var(--accent);
}  
  
.serif {
	font-family:courier, serif;
	font-weight: bold;
	fill: var(--bgcolor);
	stroke: var(--blue); 
	stroke-width: .5;  	
}

.anders {
	text-decoration: underline wavy red; 
}

Eigentlich können Sie alle CSS-Eigenschaften zur Textformatierung verwenden. Einige Ausnahmen sind zu beachten:

Da es in SVG (noch) keinen mehrzeiligen Text gibt, wirkt auch keine line-height. Besser als eine absolute Positionierung aller Zeilen ist eine relative Verschiebung mit dy:

<tspan x="20" dy="2em" ...>Textinhalt</tspan>

Bei text-decoration: underline wavy red; wirkt die Farbangabe red nicht; der Firefox rendert wie beabsichtigt eine Wellenlinie; Chrome, Edge und Opera nur eine grade Linie.

Gestaltung von Textlinks[Bearbeiten]

In SVG können sowohl grafische Objekte als auch Text mit dem a-Element umschlossen und so zu einem Verweis auf eine andere URL werden.

SVG-text: Links kennzeichnen ansehen …
<a href="https://wiki.selfhtml.org">
	<text x="20" y="130">ein Textlink</text>
</a>

<a transform="translate(300,100)" href="https://wiki.selfhtml.org">
	<rect width="430" height="30" fill="none" />
	<text x="5" y="25">
  		ein Textlink mit vergrößerter Klickfläche
	</text>
</a>
Allerdings wird der Textlink durch den Browser nicht gekennzeichnet - dies muss durch Sie nachgebaut werden.
a {
	cursor: pointer;	
	text-decoration: underline;
}

a:focus, a:hover {
	fill: var(--bgcolor);
	stroke: var(--blue); 
	stroke-width: 1; 
}

a:focus > rect, a:hover > rect {
	fill: var(--bgcolor);
	stroke: var(--blue); 
	stroke-width: 1; 
}

Der linke Verweis erhält mit der cursor-Eigenschaft einen anderen Zeiger. Bei :hover erhält der Text eine hellblaue Füllung und einen dunkelblauen Rand. Die mit text-decoration:underline ausgeführte Unterstreichung wird ebenfalls verdoppelt. Der Klickbereich umfass den gesamten Textbereich inkl. möglicher Unter- und Oberlängen.

Eine Einfärbung des Hintergrunds ist in SVG nicht möglich, da das text-Element nur aus den Buchstaben an sich besteht und keinen „inline-block“ wie in HTML darsellt. Der rechte Verweis enthält deshalb parallel zum text-Element noch ein rect-Element, das unterhalb des Texts gemalt wird. Bei :hover wird es ebenfalls eingefärbt.

Im letzten Teil dieses Kurses gibt es ein Beispiel, wie Sie mit JavaScript eine Box um Text herumzeichen können:

Füllen des Hintergrunds[Bearbeiten]

Das Füllen des Hintergrunds ist einer der einfachsten Stil-Effekte, geht aber weit über das einfache Festlegen einer Hintergrundfarbe wie in CSS hinaus.

Verläufe als Hintergrund[Bearbeiten]

Anstelle einer normalen Farbangabe können Sie Text auch mit einem Verlauf füllen. Hier verwenden wir die Farben des Regenbogens:

Verlauf in Regenbogenfarben ansehen …
  <defs>
    <linearGradient id="verlauf">
      <stop offset="0" stop-color="red"/>
      <stop offset=".25" stop-color="orange"/>
      <stop offset=".45" stop-color="yellow"/>
      <stop offset=".65" stop-color="green"/>
      <stop offset=".82" stop-color="blue"/>
      <stop offset="1" stop-color="purple"/>
    </linearGradient> 
    <linearGradient id="verlaufVertikal" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="25%" stop-color="orange"/>
      <stop offset="45%" stop-color="yellow"/>
      <stop offset="65%" stop-color="green"/>
      <stop offset="82%" stop-color="blue"/>
      <stop offset="100%" stop-color="purple"/>
    </linearGradient> 
  </defs>

  <text id="T" fill="url(#verlauf)" x="2%" y="30%">Regenbogen</text>
  <text id="T" fill="url(#verlaufVertikal)" x="2%" y="90%">Regenbogen</text>
Die beiden Texte sind mit Verläufen gefüllt. Im oberen Verlauf fehlen die x- und y-Attribute, also verläuft er standardmäßig von links nach rechts.
Der untere Verlauf #verlaufVertikal hat eine Laufrichtung von x1="0%" y1="0%" x2="0%" y2="100%"; deshalb müssen auch die Werte des offset-Attributs Prozentwerte sein.

Verläufe animieren[Bearbeiten]

Sie können einen Verlauf auch mit SMIL animieren, sodass die Farbfüllung erst nach einer gewissen Zeit erscheint:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Achtung!

Nutzer des Firefox können SMIL im Frickl nicht ausprobieren, da die animate-Elemente nicht gerendert werden.
Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
Beispiel ansehen …
<defs>
  <linearGradient id="verlauf" >
    <stop offset="0" stop-color="#dfac20">
      <animate attributeName="offset" from="0" to="1" begin="1.5s" dur="3s" fill="freeze"/>
    </stop> 
    <stop offset="0" stop-color="black">
      <animate attributeName="offset" from="0" to="1" begin="0.5s" dur="2s" fill="freeze"/>
    </stop> 
  </linearGradient> 
  <linearGradient id="verlaufVertikal" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#dfac20">
      <animate attributeName="offset" from="0" to="1" begin="1.5s" dur="3s" fill="freeze"/>
    </stop> 
    <stop offset="0" stop-color="black">
      <animate attributeName="offset" from="0" to="1" begin="0.5s" dur="2s" fill="freeze"/>
    </stop> 
  </linearGradient> 
</defs>
 
<text fill="url(#verlauf)" font-family="sans serif"  x="2%" y="30%">waagerecht</text>
<text fill="url(#verlaufVertikal)" font-family="sans serif"  x="2%" y="70%">senkrecht</text>
Die beiden Texte sind mit Verläufen gefüllt. Nicht die Verläufe selbst, sondern die beiden color-stops, bzw. ihre offset-Werte werden animiert. Dabei unterscheidet sich der Beginn der beiden Animationen, sodass die Werte immer auseinanderliegen und einen Verlauf erzeugen.

Würden die Werte zusammenfallen, ergäbe es einen scharfen Übergang.

Beachten Sie: In Chrome und Opera müssen Sie das offset-Attribut mit Werten von 0-1 verwenden, Prozentwerte lassen sich nicht animieren.
Beachten Sie: Im Internet Explorer 9-11 bleibt die Schrift schwarz, da er SMIL nicht unterstützt. Der Text bleibt aber immer lesbar.

Muster als Hintergrund[Bearbeiten]

Sie können Text mit einem gemusterten Hintergrund erzeugen, indem Sie ein Muster in einem pattern-Bereich platzieren und den Text mit diesem Muster füllen.

Hintergrundmuster ansehen …
  <defs>
    <pattern id="karo" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="10" height="10" fill="#dfac20"/>
      <rect x="10" y="0" width="10" height="10" fill="#3983ab"/>
      <rect x="20" y="0" width="10" height="10" fill="#c32e04"/>
 
      <rect x="0" y="10" width="10" height="10" fill="#c32e04"/>
      <rect x="10" y="10" width="10" height="10" fill="#5a9900"/>
      <rect x="20" y="10" width="10" height="10" fill="#dfac20"/>
 
      <rect x="0" y="20" width="10" height="10" fill="#3983ab"/>      
      <rect x="10" y="20" width="10" height="10" fill="#c32e04"/>      
      <rect x="20" y="20" width="10" height="10" fill="#5a9900"/>      
    </pattern>
    <pattern id="punkte" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="30" height="30" fill="#3983ab"/>
      <circle cx="15" cy="5" r="3" fill="#dfac20"/>
      <circle cx="25" cy="5" r="3" fill="#c32e04"/>
 
      <circle cx="5" cy="15" r="3" fill="#c32e04"/>
      <circle cx="15" cy="15" r="3" fill="#5a9900"/>
      <circle cx="25" cy="15" r="3" fill="#dfac20"/>
 
      <circle cx="5" cy="25" r="3" fill="#dfac20"/>      
      <circle cx="15" cy="25" r="3" fill="#c32e04"/>      
      <circle cx="25" cy="25" rt="3" fill="#5a9900"/>      
    </pattern>
  </defs>
 
  <text fill="url(#karo)" stroke="black" x="0" y="170" >SELFHTML</text>
  <text fill="url(#punkte)" stroke="black" x="0" y="350" >SELFHTML</text>

Muster auf Muster[Bearbeiten]

Wo ist denn der Text ?

SVG-text: Wo ist er denn? ansehen …
text {
  fill: url(#imagePattern);
}

text:focus, text:hover {
  fill: url(#textPattern);
  filter: url(#dropShadow);
}

In diesem Beispiel sind sowohl Hintergrund als auch Text mit einem Muster #imagePattern gefüllt. Erst wenn Sie über der gemusterten Fläche hovern, erscheint der Text. Das Vorbild aus dem Jahre 2009 arbeitete hier noch mit onmouseover, da :hover-Effekte bei SVG damals nicht durchgehend unterstützt wurden.[1]

Bilder als Hintergrund[Bearbeiten]

Sie können Text mit Bildern hinterlegen, indem Sie ein image-Element innerhalb eines pattern-Bereichs platzieren.

In diesem Beispiel [2] wird ein animated gif eines Feuers eingebunden, das den Text brennen lässt. Das verwendete gif aus Wikimedia Commons ist mit 1MB relativ groß und für diesen Zweck nicht optimal, da es neben den Flammen viele schwarze Bereiche hat.

SVG-text: Brennende Buchstaben ansehen …
<defs>
	<pattern id="firePattern" viewBox="20 0 127 177" patternUnits="userSpaceOnUse" width="137" height="177" x="0" y="60">
		<image href="https://upload.wikimedia.org/wikipedia/commons/7/78/Fire-animated.gif" width="177" height="177"></image>
	</pattern>
</defs>

<text tabindex="1" x="300" y="240">Burn</text>

Die (animierte) Rastergrafik wird über das image-Element eingebunden. Die Größe ist dabei auf 1/4 skaliert.

Im Definitionsabschnitt defs wird ein pattern definiert und mit y so verschoben, dass die Flammen möglichst passend den Text illuminieren. Um die schwarzen Stellen auszublenden, wird die viewBox beschnitten.

Ränder[Bearbeiten]

Das Gestalten der Randlinien einzelner Buchstaben (genauer: Glyphe) ist eine der Eigenschaften, die SVG der CSS-Welt voraus hat. In der CSS3-Spezifikation gab es einen Vorschlag zu text-outline, der jedoch nie umgesetzt wurde. Die Eigenschaft text-stroke entspricht keiner Spezifikation und ist nur mit vendor-prefix umgesetzt.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Randlinie als Verlauf[Bearbeiten]

Wie bei der Füllung können Sie auch die Randlinie mit einem Verlauf darstellen:

Beispiel ansehen …
  <defs>
    <linearGradient id="verlauf">
      <stop offset="0" stop-color="red"/>
      <stop offset=".25" stop-color="orange"/>
      <stop offset=".45" stop-color="yellow"/>
      <stop offset=".65" stop-color="green"/>
      <stop offset=".82" stop-color="blue"/>
      <stop offset="1" stop-color="purple"/>
    </linearGradient> 
    <linearGradient id="verlaufVertikal" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="25%" stop-color="orange"/>
      <stop offset="45%" stop-color="yellow"/>
      <stop offset="65%" stop-color="green"/>
      <stop offset="82%" stop-color="blue"/>
      <stop offset="100%" stop-color="purple"/>
    </linearGradient> 
  </defs>

  <text stroke="url(#verlauf)" x="2%" y="30%">Regenbogen</text>
  <text stroke="url(#verlaufVertikal)" x="2%" y="80%">Regenbogen</text>
Wenn Sie die Randlinien zu stark festlegen, besteht die Gefahr, dass sie sich gegenseitig überlagern.

animinierte Randlinien[Bearbeiten]

Einer der spektakulärsten SVG-Texteffekte sind mit CSS-animation animierte Randlinien.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beispiel ansehen …
text {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 10 50;
  animation: strokeAni 2s infinite linear;
}

@ keyframes strokeAni {
  0% { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 0; }
}
<svg viewBox="0 0 880 450">

  <text id="eins" stroke="#dfac20" x="2%" y="40%">Punkt</text>
  <text id="zwei" stroke="#306f91" x="2%" y="40%">Punkt</text>
  <text id="drei" stroke="#c32e04" x="2%" y="40%">Punkt</text>
 
</svg>
Das vorliegende Beispiel ist eher ein "Proof of concept" als eine praktikable Anwendung. Das Text-Element wird dreimal genau übereinander dargestellt, wobei die Randlinie durch das stroke-dasharray-Attribut unterbrochen ist.
  • Damit der Text auch in Browsern funktioniert, die keine CSS-Animation von SVG-Attributen unterstützen (IE 9-11), sind die jeweiligen Linien durch das stroke-dashoffset-Attribut versetzt. So ist der Text trotzdem lesbar.
  • Wenn Sie versuchen eine gepunktete Randlinie (mit gleichmäßig runden Kreisen) zu erzeugen, stellen die Browser die Länge des Striches unterschiedlich lang dar, sodass die Punkte trotz stroke-linecap:round; nie kreisfömig werden.
  • Sie könnten die Länge einer Randlinie mit den kombinierten Längen der Linien abgleichen; die unterschiedlichen Buchstaben haben aber alle verschiedene Längen, sodass es jeweils an einer Stelle zu einem Bruch der Animation kommt.

Weitere Beispiele finden Sie auf tympanus.net. Eine Variation dieser animierten Randlinien ist diese Demo, in der mit JavaScript Kieselsteine entlang des Pfads der Randlinie erzeugt werden.[3]

Text-Eigenschaften[Bearbeiten]

Verschiebung mit dx,dy[Bearbeiten]

Mit den Eigenschaften dx und dy können Sie einzelne Zeichen eines Textes im Verhältnis zu ihrem x- oder y-Wert verschieben.[4]

Folgende optionale Angaben sind möglich:

  • dx (Standardwert 0) einer oder mehrere Werte
  • dy: einer oder mehrere Werte, die mit einem Komma oder einem Leerzeichen voneinander getrennt sein müssen
Beispiel ansehen …
  <text x="100" y="100" dx="0 0 0 -340" dy="0 0 0 -30">
    SVG (nach vorne verschoben)
  </text>
Beachten Sie: Beinhalten die Listen weniger Werte als Zeichen im Text vorhanden sind, orientieren sich die nachfolgenden Zeichen an der Position ihrer Vorgänger.

Es ist eher unüblich, Text aus seinem semantischen Zusammenhang heraus zu verschieben. Eine Anwendungsmöglichkeit von dy findet sich beim Rotieren von Text, damit der Mittelpunkt der Rotation sich nicht an der Grundlinie des Textes befindet. Die Angabe dy="0.35em" zentriert das text- oder tspan-Element vertikal [5].

Rotation[Bearbeiten]

Mit der Eigenschaft rotate drehen Sie einzelne bzw. eine Folge von Zeichen.

Folgende Angaben sind möglich:

  • rotate: Gradzahl der Drehung, positive oder negative Zahl von 0-360 (einer oder mehrere Werte, die mit einem Komma oder einem Leerzeichen voneinander getrennt sein müssen)
Beachten Sie: Beinhalten die Listen weniger Werte als Zeichen im Text vorhanden sind, orientieren sich die nachfolgenden Zeichen am Wert ihrer Vorgänger.
Beispiel ansehen …
  <text x="0" y="100"
    dx="10 10 10 10 10 10 10 10 10 10 10 10 15 15 15 15 15 15"
    rotate="0 10 -10 10 -10 10 -10 20 -20 20 -20 20 -30 30 -30 30 -30 30">
    Jetzt geht's rund!
  </text>

Grundlinienverschiebung[Bearbeiten]

Mit der Eigenschaft baseline-shift können Sie die Grundlinie des Textes so verschieben, dass Sie hoch- oder tiefgestellten Text anzeigen können.

  • SVG 1.1
  • Chrome
  • Edge
  • Leer
  • Opera
  • Safari

Folgende Einstellungen sind möglich:

  • baseline (Standardwert)
  • super: hochgestellter Text
  • sub: tiefgestellter Text
  • Längenangabe
Beispiel ansehen …
    <text x="10" y="40">
      E = mc<tspan class="super">2</tspan>
    </text>
    <text x="10" y="80">
      CH<tspan class="sub">4</tspan> 
      + 2O<tspan class="sub">2</tspan>
      → CO<tspan class="sub">2</tspan> + 2H<tspan class="sub">2</tspan>O
    </text>
    <text x="10" y="200">
      H
      <tspan style="baseline-shift:-15;">a</span>
      <tspan style="baseline-shift:0;">L</tspan>
      <tspan style="baseline-shift:10;">L</tspan>
      <tspan style="baseline-shift:0;">O</tspan>
    </text>
Beachten Sie: Firefox und Internet Explorer 9-11 unterstützen diese Eigenschaft nicht, so sollte es aussehen:

Screenshot Grundlinienverschiebung

Empfehlung: Das Attribut soll aus dem Standard entfernt werden. Verwenden Sie vertical-align!
Alternativ können Sie passene Unicode-Zeichen verwenden.

Schriftdehnung[Bearbeiten]

Mit der Eigenschaft font-stretch (vergleiche: CSS-Eigenschaft font-stretch) können Sie die Schriftbreite festlegen. Dabei bleibt die Schrifthöhe davon unberührt.

  • SVG 1.1
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Einstellungen sind möglich:

  • normal (Standardwert)
  • wider: breiter
  • narrower: schmaler
  • ultra-condensed: sehr zusammengestaucht
  • extra-condensed:
  • condensed: gestaucht
  • semi-condensed:
  • semi-expanded:
  • expanded: auseinander gezogen
  • extra-expanded
  • ultra-expanded
Beispiel
   <text x="10" y="30" style="font-stretch="ultra-condensed">
    Gestauchter Text
  </text>
  <text x="10" y="60">
    Normaler Text
  </text>
  <text x="10" y="90" style="font-stretch="ultra-expanded">
    Gedehnter Text
  </text>

Keiner der gängigen Browser unterstützt diese Eigenschaft. Alternativ könnten Sie Text mit transform="scale(x y)" stauchen oder dehnen.

Textausrichtung[Bearbeiten]

Mit der Eigenschaft text-anchor können Sie Text links-, rechtsbündig und mittig ausrichten.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • start (Standardwert) Text liegt rechts des Ankerpunkts x
  • middle: Ankerpunkt liegt in der Mitte des Textes
  • end: Text liegt links des Ankerpunktes X
Beachten Sie, dass Text in SVG keine feste Breite hat. Bezugspunkt für die Textausrichtung ist der Ankerpunkt X. Eine Einstellung text-anchor="end" sorgt dafür, dass der Text links der X-Koordinate angezeigt wird. Unter Umständen muss dann der Wert für X verändert werden, damit der Text nicht aus dem sichtbaren Bereich verschwindet.
Sinnvoll ist text-anchor="middle", da man damit Text z.B. in Kreisen oder Ellipsen trotz unterschiedlicher Länge mittig ausrichten kann und so einfach den X-Wert des Hintergrund-Elements übernehmen kann.
Beispiel ansehen …
    <text x="200" y="50" text-anchor="start">
      start
    </text>
    <text x="200" y="100" text-anchor="middle">
      middle
    </text>
    <text x="200" y="150" text-anchor="end">
      end
    </text>
	
    <g>
      <text x="250" y="250">Anwendungsbeispiel:</text>
      <text x="250" y="280">KFZ-Nationalitätenkennzeichen</text>
      <ellipse cx="100" cy="400" rx="40" ry="25"/>
      <text x="100" y="410">B</text>
    </g>
    <g>
      <ellipse cx="300" cy="350" rx="40" ry="25"/>
      <text x="300" y="360">NL</text>
    </g>
    <g>
      <ellipse cx="500" cy="400" rx="40" ry="25"/>
      <text x="500" y="410">LUX</text>
    </g>

Wortabstand[Bearbeiten]

Mit der Eigenschaft word-spacing können Sie wie bei der gleichnamigen CSS-Eigenschaft den Abstand zwischen den Wörtern im Text bestimmen.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • eine numerische Angabe, jedoch kein Prozentwert, auch negative Angaben mit Größenangabe


Beispiel ansehen …
  <text x="100" y="100" word-spacing="-5px">
    Beispieltext mit geringem Wortabstand
  </text>
  <text x="100" y="200">
    Beispieltext mit normalem Wortabstand
  </text>
  <text x="100" y="300" word-spacing="1em">
    Beispieltext mit großem Wortabstand
  </text>
Beachten Sie: Im Unterschied zu anderen Attributen benötigt word-spacing eine Größenangaben (px, em ...). Ein reiner Zahlenwert, der normalerweise Pixel bedeutet, wird ignoriert.

Zeichenabstand[Bearbeiten]

Mit der Eigenschaft letter-spacing können Sie wie bei der gleichnamigen CSS-Eigenschaft den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:


Beispiel ansehen …
  <text x="100" y="100" letter-spacing="-2.5">
    Beispieltext
  </text>
  <text x="100" y="200">
    Beispieltext
  </text>
  <text x="100" y="300" letter-spacing="2.5">
    Beispieltext
  </text>


Weblinks[Bearbeiten]

  1. http://svg-wow.org/blog/2009/10/04/pattern1/ (gemusterter Text über gemustertem Hintergrund)
  2. Original gefunden auf: tympanus.net; (dort ist die referenzierte Grafik nicht mehr vorhanden)
  3. http://svg-wow.org/blog/2009/10/04/pebbles/
  4. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dx
  5. https://github.com/mbostock/d3/wiki/SVG-Shapes#svg_text