Texteffekte mit SVG: Muster, Masken und Beschneidungspfade

Dass das SVG-Format weit mehr als nur vektorbasierte Formen darzustellen in der Lage ist, weißt du bereits. Heute will ich dir zeigen, was für Texteffekte mit SVG möglich sind. Mit Mustern, Masken und Beschneidungspfaden setzt du eine Vielzahl kreativer Ideen um. So realisierst du beispielsweise interessante und ungewöhnliche Texteffekte, die auch mit den vielseitigen CSS3-Möglichkeiten so nicht machbar sind – oder zumindest nicht in allen aktuellen Browsern funktionieren.

Texteffekte mit SVG

Muster als Texthintergrund

Mit dem „<pattern>“-Element erstellst du per SVG beliebige Muster und setzt sie als Hintergrund für Formen, aber auch Texte ein. Das können sich wiederholende Linien, Kreise oder Quadrate sein. Für ein zwei mal zwei Pixel großes Schachbrettmuster reicht es, zwei Quadrate mit einer Länge von einem Pixel zu definieren. Auch eine schlichte Linie wird da zu einem durchaus interessanten Muster für Texte.

<defs>
  <pattern id="muster" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
    <line x1="0" y1="0" x2="5" y2="5" stroke="#a62121" />
  </pattern>
</defs>

Sowohl „<pattern>“-Elemente wie auch andere Elemente, die nicht direkt dargestellt, sondern referenziert werden, sollten innerhalb des Containers „<defs>“ platziert werden.

Damit ein Element mit einem Muster gefüllt werden kann, musst du dem Muster eine ID zuweisen. Anschließend wird diese ID per „fill“-Attribut oder CSS-Eigenschaft dem Element zugewiesen. Das Ganze funktioniert nicht nur mit klassischen Formen, sondern auch mit dem Schriftelement „“.

text {
  fill: url(#muster);
}

svg-texteffekte1

Im Beispiel wird ein Muster per „<pattern>“ mit der ID „muster“ ausgezeichnet und anschließend einem „<text>“-Element zugewiesen. Im Gegensatz zu rein grafischen Lösungen bleibt der Text hier auswählbar und kann somit auch kopiert werden. Per CSS3 gibt es mit der Eigenschaft „background-clip“ eine ganz ähnliche Möglichkeit wie die hier beschriebene. Der Wert „text“ für diese Eigenschaft sorgt dafür, dass eine Hintergrundgrafik, die einem Element zugewiesen wurde, ausschließlich auf den Text dieses Elementes Anwendung findet. Es entsteht somit derselbe Effekt wie in dem SVG-Beispiel. Allerdings ist Chrome der einzige Browser, der den Wert „text“ für diese Eigenschaft unterstützt.

Ausgeschnittener Text

Zusammen mit dem „<mask>“-Element kannst du einen umgekehrten Effekt wie im ersten Beispiel erzielen. Statt einen Text mit einem Muster zu versehen, kannst du Text aus einem flächigen Muster aussparen. Dazu musst du neben einem Muster auch eine Maske per „<mask>“-Element  im „<defs>“-Bereich anlegen. Masken funktionieren ähnlich wie in Photoshop und anderen Anwendungen zur Bildbearbeitung. Über den Tonwert wird entschieden, was eine Maske darstellen soll. Je heller der Tonwert ist, desto größer ist die Transparenz. Weiß sorgt also für 100 Prozent Sichtbarkeit, Schwarz für gar keine Sichtbarkeit. Platziert man innerhalb einer Maske ein schwarzes seitenfüllendes Rechteck und setzt davor einen weißen Text, erhält man eine Maske, bei der der Text ausgespart wird.

<defs>
 <pattern id="muster" width="5" height="5" patternUnits="userSpaceOnUse">
   <line x1="0" y1="0" x2="5" y2="5" stroke="yellow" />
 </pattern>
 <mask id="maske">
   <rect fill="white" />
   <text x="50%" y="50%" fill="black">Dr. Web</text>
  </mask>
</defs>

Im Gegensatz zum ersten Beispiel ist der Text hierbei also Bestandteil der Maske und kein eigenständig dargestelltes Element. Im letzten Schritt muss die Maske per „mask“-Eigenschaft noch einem Element zugewiesen werden. Dieses ist in diesem Fall ebenfalls ein seitenfüllendes Rechteck. Diesem Rechteck wird zusätzlich per „fill“ nun noch das Muster als Füllung zugewiesen.

defs + rect {
  fill: url(#muster);
  mask: url(#maske);
}

 svg-texteffekte2

Im Beispiel erhält also das auf der Zeichenfläche dargestellte Rechteck per „mask“-Eigenschaft die Maske mit der ID „maske“ zugewiesen sowie per „fill“ das Muster mit der ID „muster“.

Wichtig ist, dass die verwendeten Rechtecke und deren Elternelemente jeweils 100 Prozent Breite und Höhe haben, damit das Muster die ganze Seite ausfüllen kann. Da der Text hierbei Teil der Maske ist, ist der Text in diesem Fall nicht auswählbar.

Text mit Pfad beschneiden

Neben Masken kennt SVG Beschneidungspfade. Auch diese funktionieren ganz ähnlich wie in Photoshop. Ein Beschneidungspfad definiert einen Pfad, mit dem ein Element – zum Beispiel ein Text – auf die Form des Pfades beschnitten werden kann. Hierzu wird im „<defs>“-Bereich per „<clip-path>“ ein Beschneidungspfad definiert.

<defs>
  <clipPath id="pfad">
    <circle cx="33%" cy="50%" r="150" />
    <circle cx="66%" cy="50%" r="150" />
  </clipPath>
</defs>

Darin können beliebige Pfade enthalten sein, die sich addieren und somit den Beschneidungspfad ergeben. Anschließend wird der Beschneidungspfad über die Eigenschaft „clip-path“ einem Element zugewiesen.
svg-texteffekte3
Im Beispiel wird ein mehrzeiliger Text auf die Form zweier sich überschneidender Kreise beschnitten. Dabei wird dem „<text>“-Element über die CSS-Eigenschaft „clip-path“ die ID des Beschneidungspfades zugewiesen.

text {
  clip-path: url(#pfad);
}

Einem solchen Beschneidungseffekt kannst du natürlich auch mit einer Maske realisieren. Allerdings muss bei einer Maske immer ein schwarzer und ein weißer Bereich vorhanden sein. Das heißt, du brauchst mehrere Formen, denen jeweils eine Farbe zugewiesen werden muss. Bei einem Beschneidungspfad benötigst du nur einen Pfad.

Browserunterstützung

Das Schöne ist, dass alle aktuellen Browser sowohl „<pattern>“- als auch „<mask>“- und „<clip-path>“-Elemente unterstützen. Hier muss gegebenenfalls nur für ältere Browser ein Fallback gefunden werden, das beispielsweise aus einfachem Text oder einer Grafik bestehen kann.

Beispiele auf Codepen

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

Theo
Gast
6 Monate 8 Tage her

Eine echt feine Sache. Mit „blending modes“ kombiniert, öffnen sich viele Möglichkeiten. Danke für den Artikel.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen