Beschneidungspfad/Maskierung
Es sind Schablonen, die innerhalb ihrer Form einen Effekt auslösen. Ausschnitte und Masken werden im Definitionsbereich notiert.
<clipPath>
<clipPath> schneidet alles weg, was außerhalb ihrer Form liegt.
|
Mittels clipPath wird in diesem Beispiel die Schrift als Silhouette ( Ausschnittsbegrenzer, Beschneidungspfad ) eines Bildes eingesetzt und somit innerhalb abgebildet. Der rote Rand stellt nicht die Dimension des Bildes dar. Er wird mit den Attributen Höhe und Breite im svg-Element definiert height="140" width="530" und soll nur der Demo dienen.
Der abgebildete QuellCode stellt innerhalb des svg-Körpers zwei Kindelemente zur Gruppierung dar. Im eigentlichen Sinne wird mit defs ein Definitionsabschnitt gemeint und g ist das Gruppierungselement. Innerhalb defs erhält clipPath den Identifikator "feurig", der dazu dienen soll, dem Bild die „Maske“ style="clip-path: url(#feurig);" überzustülpen.
In 16: wird das Bild vertical verschoben, um mehr Feuer zu bekommen. Jedes <tspan> bedarf einer absoluten y-Ausrichtung 10: und 11:. Wie unschwer zu erkennen ist, sollte man sich eingehend mit der etwas anderen Syntax beschäftigen. Wer CSS von Hand schreibt, wird eine Umstellungszeit brauchen. Ich fluche hier noch ständig. Nicht width:530px; sondern width="530"! Die Angabe zur Maßeinheit entfällt auch noch, wenn nichts abweichendes von „px“ als Einheit gemeint ist. Kann ich gut mit leben. Zum Exerzieren ist noch transform="scale(1)" im QuellCode geblieben, 1 - der macht nichts, der will nur spielen! |
||
| Damit wäre das geschafft. Obwohl man das durchaus ohne roten Rahmen stehen lassen kann, will ich wiederum die Bildvorlage dazufügen. Diese erhält die halbe Deckkraft. Das ist der nächste Schritt. | |||
| Was hier hinzugefügt ist, betrifft die 5: Transparenz auf das Bild, 9: - 11: einen Bildausschnittbegrenzer allein für den MSIE, 20: - 23: nun das Bild und geänderte Identifikatoren. In 20: und 25: wird das Bild nach oben verschoben, um einen interessanteren Bildausschnitt zu erhalten.
Das Beispiel hätte ich mit meinem uralt Photoshop in unvergleichlich kürzerer Zeit erledigt. Aber was solls, es ist die Möglichkeit, die besteht! Quellcode zur Feuerschale |
|||
| Dazu möchte ich noch Ausführungen von maurice-web empfehlen als auch die Dokumentation von w3.org - auf englisch, was sonst. | |||
<mask>
„Maskierung ist eine Kombination aus Auschneiden und Transparenzwerten“(*). Eine Maske beruht auf Helligkeitsunterschiede seines Bezugsobjektes. Weiß oder Transparenz(1) entsprechen 100% Übertragung. Für niedrigere Werte schwillt die Übertragung ab, sodann Schwarz oder Transparenz(0) ein Ausschneiden bewirkt. Somit kann <mask> Farbwerte seines darzustellenden Objektes hervorben bis ausschneiden (Clipping).
1.: Der Verlauf wird auf ein Rechteck angewendet.
<linearGradient id="lgr33_1"> <stop offset="0" stop-color="rgba(255,255,0,0)" /> <stop offset="1" stop-color="white" /> </linearGradient><rect fill="url(#lgr33_1)" /> 2.: Über dem roten Rechteck wird ein blauer mit gleicher Breite angelegt. Die Maske hat die halbe Breite. Der Rest des blauen Rechtecks liegt außerhalb der Maske. Der Verlauf beschränkt sich auf diese definierte Maske. 3.:Ein Bild als Maske eingesetzt und monochrom mit der Farbe #fe8 (hellerocker) wiedergegeben. * - Hier muss ich nochmal auf Transparenz eingehen. Jede Farbe wirkt als Maske für die Aufhellung auf weiß. Das ist also nichts anderes als ein Bild von rgb in Graufstufen zu wandeln. Die Werte 1: 255,0,0 3: 0,255,0 und 5: 0,0,255 erzeugen so unterschiedliches Transparenzverhalten, dass allein mit dem Alphakanal dies nicht erklärt ist. Klärung schafft da vielleicht der LAB-Farbraum. So wie die Farb- bzw. Helligkeitsintensität wahrgenommen wird, errechnet sich der Grad der Opazität. 5. Feld (blau): 0,0,255 entspricht #111 oder rgb(17,17,17). Das ist also nicht so einfach zu verstehen. Vielleicht muss man das auch garnicht! Quellcode zum Transparenzverhalten Quellcode für rechtes Beispiel |
|
| Ich nehme noch einmal die Feuerschale als Demo, nun aber mit den Vorteilen der Maske. Vorteil deshalb, weil die Kombination von hartem Ausschneiden und „weicher“ Maske die Möglichkeiten erweitert.
Quellcode des Beispiels |
|