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

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

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

Text als Beschneideform

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

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

ToDo (weitere ToDos)

Dieser Abschnitt muss erstellt werden

Verwendung in CSS

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

Weblinks


Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Tutorials/Text/Text-Effekte_mit_Masken_und_Beschneidungen&oldid=82919“