SVG/Tutorials/Texteffekte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel wollen wir Ihnen zeigen, wie Sie SVG-Text mit Füllungen und Randlinien gestalten und animieren können.

In Teil 2 geht es dann um Texteffekte mit Filtern und Masken.

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:

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 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:

  • SVG 1.1
  • Chrome
  • Firefox
  • Leer
  • 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. Die offset-Werte der beiden color-stops sind 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 bleibt die Schrift schwarz, da auch die neuesten Versionen SMIL nicht unterstützen.

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.

Beispiel ansehen …
<svg>
  <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>
 
</svg>

In dieser Demo sind sowohl Hintergrund als auch Text mit einem Muster gefüllt. Wenn Sie über der gemusterten Fläche hovern, erscheint der Text.[1]

Bilder als Hintergrund[Bearbeiten]

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

Auf tympanus.net finden Sie ein eindrucksvolles Beispiel, in dem ein animated gif den Text brennen lässt.

Beispiel
<pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70" y="35">
  <image xlink:href="img/fire.gif" width="256" height="300"></image>
</pattern>

<!-- Text -->
<text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text">
  Burn
</text>

Ränder[Bearbeiten]

Das Gestalten von Randlinien 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 bei den Blink-Browsern umgesetzt.

  • SVG 1.1
  • 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:

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
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.

  • SVG 1.1
  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beispiel ansehen …
text {
  fill: none;
  stroke-width: 5px;
  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="#3983ab" 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 (Android, IE und Safari], sind die jeweiligen Linien durch das stroke-dashoffset-Attribut versetzt. So ist der Text trotzdem lesbar.
  • Wenn Sie versuchen eine gepunktete Randlinie 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.[2]

Schatten[Bearbeiten]

Auf vielen älteren Webseiten finden sich Beispiel für SVG und Schlagschatten. Heutzutage können Sie diesen Effekt auch mit HTML und der CSS-Eigenschaft text-shadow erreichen.

Schlagschatten[Bearbeiten]

Mit diesem Beispiel können Sie Text mit einem scharfen Schlagschatten unterlegen.

  • SVG 1.1
  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<svg viewBox="0 0 880 450">
  <defs>
    <linearGradient id="verlauf" gradientTransform="rotate(90,.5,.5)">
      <stop offset="0" stop-color="#fff"/>
      <stop offset=".3" stop-color="#000"/>
      <stop offset=".4" stop-color="#220"/>
      <stop offset=".55" stop-color="#fff"/>
      <stop offset=".65" stop-color="#dfac20"/>
      <stop offset=".75" stop-color="#002"/>
      <stop offset=".9" stop-color="#fff"/>
    </linearGradient> 
  </defs>

  <text x="22" y="202" fill="#200"          stroke-width="2" stroke="#200"  >Schlagschatten</text>
  <text x="20" y="200" fill="url(#verlauf)" stroke-width="0" stroke="#222" >Schlagschatten</text>
</svg>
Der Text wird mit einem Verlauf gefüllt. Dazu wird der gleiche Text noch einmal um 2px nach rechts und unten versetzt dargestellt. Durch die dunkle Randlinie sieht er wie ein dunkler Schatten aus.

Reflektion[Bearbeiten]

Die gleiche Vorgehensweise ermöglicht es Ihnen auch, den Text gespiegelt als Schatten zu werfen. Dabei wird das zweite Text-Element transformiert.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<svg viewBox="0 0 440 225">
  <defs>
    <linearGradient id="verlauf" gradientTransform="rotate(90,.5,.5)">
      <stop offset="0" stop-color="#fff"/>
      <stop offset=".3" stop-color="#000"/>
      <stop offset=".4" stop-color="#220"/>
      <stop offset=".55" stop-color="#fff"/>
      <stop offset=".65" stop-color="#884"/>
      <stop offset=".75" stop-color="#002"/>
      <stop offset=".9" stop-color="#fff"/>
    </linearGradient> 
    <linearGradient id="schatten" gradientTransform="rotate(90,.5,.5)">
      <stop offset="0" stop-color="#fff" stop-opacity="0"/>
      <stop offset=".3" stop-color="#000" stop-opacity=".1"/>
      <stop offset=".4" stop-color="#220" stop-opacity=".2"/>
      <stop offset=".55" stop-color="#fff" stop-opacity=".5"/>
      <stop offset=".65" stop-color="#884" stop-opacity=".6"/>
      <stop offset=".75" stop-color="#002"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient> 
  </defs>

  <text x="60" y="100" fill="url(#verlauf)" stroke-width=".5" stroke="#222"   transform="scale(.5,1)"  >Reflektion</text>
  <text x="60" y="100" fill="url(#schatten)" transform="translate(30,165) skewX(25) scale(.5,-.65) ">Reflektion</text>
</svg>
Damit der Text höher (und schmaler) wirkt, wird er um den Faktor (0.5,1) gestreckt. Der Schatten wird mit skew(25) verzerrt und dann mit translate(30,165) an die richtige Stelle verschoben.

3D-Look[Bearbeiten]

Auf dieser Seite finden Sie einen Text mit einem 3D-Schatten. Wenn Sie in den Quelltext schauen, sehen Sie, dass der Text mit einem use-Element unzählige Male referenziert wird. Früher war dies die einzige Möglichkeit solche Texteffekte zu erzielen; mit CSS3 können Sie diese Effekte mit text-shadow leichter (und vor allem semantischer) erreichen.

Beispiel: 3D-Look
    <use xlink:href="#t" transform="translate(0,10)"/>
    <use xlink:href="#t" transform="translate(0,9)"/>
    <use xlink:href="#t" transform="translate(0,8)"/>
    <use xlink:href="#t" transform="translate(0,7)"/>
    <use xlink:href="#t" transform="translate(0,6)"/>
    <use xlink:href="#t" transform="translate(0,5)"/>
    <use xlink:href="#t" transform="translate(0,4)"/>
    <use xlink:href="#t" transform="translate(0,3)"/>
    <use xlink:href="#t" transform="translate(0,2)"/>
    <use xlink:href="#t" transform="translate(0,1)"/>
    <text id="t" x="50%" y="50%" fill="url(#lg2)" transform="translate(0,2)"><tref xlink:href="#top"/></text>
    <text x="50%" y="50%" fill="black" transform="translate(0,2)" stroke="black"><tref xlink:href="#top"/></text>
    <text x="50%" y="50%" fill="white" transform="translate(0,1)" stroke="white"><tref xlink:href="#top"/></text>
    <text id="top" x="50%" y="50%" fill="url(#lg)">SCG-Wow 2010</text>
Empfehlung: Verwenden Sie die CSS-Eigenschaft text-shadow für Schatteneffekte wie einen 3D-Look. Das Markup ist semantischer und übersichtlicher.

Weblinks[Bearbeiten]

  1. http://svg-wow.org/blog/2009/10/04/pattern1/ (gemusterter Text über gemustertem Hintergrund)
  2. http://svg-wow.org/blog/2009/10/04/pebbles/