SVG/Tutorials/Text/Text-Effekte mit Masken und Beschneidungen

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

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
● 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.

Beschneidungen[Bearbeiten]

Text als Beschneideform[Bearbeiten]

Beispiel ansehen …
  <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[Bearbeiten]

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:

Beispiel ansehen …
 <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[Bearbeiten]

ToDo (weitere ToDos)

Dieser Abschnitt muss erstellt werden

Verwendung in CSS[Bearbeiten]

Auch hier können Sie Masken und Beschneideformen in SVG erstellen und in CSS referenzieren.


Weblinks[Bearbeiten]