SVG -Element
SVG steht für Scalable Vector Graphic. Es kann verwendet werden, um Grafiken und Animationen wie in HTML-Canvas zu erstellen.
Das Element <feBlend> wird verwendet, um zwei Bilder oder SVG-Fragmente zu einer einzigen Grafik zu kombinieren. Es führt eine pixelweise Kombination von zwei eingegebenen SVG-Fragmenten oder -Bildern aus.
Syntax:
<feBlend in="" in2="" mode=""/>
Attribute:
- in – Es identifiziert die Eingabe für das angegebene Filterelement.
- in2 – Identifiziert die zweite Eingabe für das angegebene Filterelement. Es nimmt die gleichen Werte wie das 'in'-Attribut an.
- mode – Definiert den Mischmodus auf dem Filterelement <feBlend>. Wenn mode nicht angegeben ist, wird der normale Wert ausgeführt.
Beispiel 1:
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1" /> <feBlend in="FillPaint" in2="floodFill" mode="multiply" /> </filter> </defs> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: lightgreen; filter: url(#spotlight);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> <g fill="#FFFFFF" stroke="black" font-size="10" font-family="Verdana"> <text x="50" y="90">GeeksForGeeks</text> </g> </svg> </body> </html>
Ausgabe:
Beispiel 2:
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="Screen"> <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" /> </filter> </defs> <rect x="1" y="1" width="198" height="118" style="stroke: #000000; fill: black; filter: url(#Screen);" /> <circle cx="100" cy="60" r="55" stroke="black" stroke-width="3" fill="Lightgreen" /> <g fill="#FFFFFF" stroke="Green" font-size="10" c font-family="Verdana"> <text x="60" y="62">GeeksForGeeks</text> </g> </svg> </body> </html>
Ausgabe: