Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

SVG/Tutorials/Text/Füllungen und Randlinien

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

Informationen zu diesem Text

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

SVG-Markup ansehen …
Eext 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, so dass die einzelnen Zeichen versetzt dargestellt werden.

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.

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, so dass die Farbfüllung erst nach einer gewissen Zeit erscheint:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
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, so dass 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, so dass 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, so dass 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]


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/