Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.
SVG/Tutorials/Text/Text-Effekte mit Masken und Beschneidungen
Text-Info
- 20min
- einfach
- ● SVG
● JavaScript
Im Unterschied zu einer Beschneidung mit clipPath, bei der außerhalb der Beschneideform stehende Teile einfach abgeschnitten werden, sind Masken Grafiken, die Sie auch für teiltransparente Schablonen verwenden können. Unter den Masken befindliche Objekte sind nur in transparenten Bereichen sichtbar. Dies können Sie durch Farbverläufe oder Filtereffekte erreichen.
Inhaltsverzeichnis
Beschneidungen
Text als Beschneideform
<defs>
<clipPath id="beschneideform">
<text stroke="black" x="10" y="200">USA</text>
</clipPath>
</defs>
<g style="clip-path: url(#beschneideform);">
<image x="10" y="10" width="500" height="375"
href="Alaska-rockies.jpg">
<title>Rockie Mountains</title>
</image>
</g>
Das Gruppierungselement enthält ein image-Element und ein style-Attribut mit einer Referenz auf eine Beschneideform. Diese könnte auch im style-Bereich oder in ein externen Stylesheet ausgelagert werden. Das Foto ist größtenteils unsichtbar, nur der Bereich des Textes wird dargestellt.
Nachteilig ist hier, dass nur Bruchteile des Fotos sichtbar sind.
Suchscheinwerfer
In diesem Beispiel soll Text während des Lesens gehighlighted werden. In einer einfachen Variante könnte hinter dem Text (also im SVG-Markup vorher) ein gelber Suchscheinwerfer den Lesefluss nachahmen, indem er den Hintergrund von links nach rechts beleuchtet.
In unserem Fall soll auch die Textfarbe geändert werden, was nur über Umwege geht:
<defs>
<clipPath id="clipText">
<text x="10" y="80">Energie des Verstehens</text>
</clipPath>
</defs>
<circle id="light" cx="20" cy="60" r="50" >
<animate
attributeName="cx"
dur="6"
values="-50;750;"
repeatDur="indefinite"/>
</circle>
<g style="clip-path: url(#clipText);">
<rect id="grundfarbe" width="100%" height="100%"/>
<circle id="akzent" cx="20" cy="60" r="50" >
<animate
attributeName="cx"
dur="6"
values="-50;750;"
repeatDur="indefinite"/>
</circle>
</g>
Der Text ist nicht Teil des Inhalts, sondern der Beschneideform. Hintergrund ist das rect-Element mit der Grundfarbe des Texts. Daneben gibt es einen Kreis, der mit animate animiert wird. Seine Füllfarbe ist die Akzentfarbe rot. Beide Element sind innerhalb des g-Elements, auf das die Beschneideform angewandt wird. Nur der Text der Beschneideform ist sichtbar.
Da der Kreis mit der Akzentfarbe animiert wird, wandert er über die Schrift. Zur Verdeutlichung wurde ein gelber „Suchscheinwerfer“ hinzugefügt.
Masken
ToDo (weitere ToDos)
Verwendung in CSS
Auch hier können Sie Masken und Beschneideformen in SVG erstellen und in CSS referenzieren.
Weblinks
- sitepoint: Masking in the Browser with CSS and SVG
- CSS and SVG Masks CodePen-Demo von Yoksel
- css-tricks: Animate a Blob of Text with SVG and Text Clipping : Ein „vogelwildes“ Beipiel, wie Text aus vielen mit JS realisierten Blobs gemorpht wird.
