SVG-Abwurfschatten
Beschreibung von SVG-Filtern
Alle SVG-Filter werden innerhalb eines <defs>-Elements definiert. Das <defs>-Element ist die Kurzform für „Definitions“ (Definitionen). Es enthält die Definition spezifischer Elemente wie Filter. Das <filter>-Element definiert einen SVG-Filter. Dieses Element verfügt über ein erforderliches id-Attribut, das den Filter identifiziert.
Um Abwurfschatten zu erstellen, verwenden Sie das <feOffset>-Element. Dazu wird eine SVG-Grafik benötigt, die in der xy-Ebene verschoben wird.
Beispiel für das SVG <feOffset>-Element:
SVG-Abwurfschatten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="150" height="150">
<defs>
<filter id="filter" x="0" y="0" width="150%" height="150%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="110" height="110" stroke="purple" stroke-width="5" fill="pink"
filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Im oben genannten Beispiel gibt das id-Attribut des <filter>-Elements einen eindeutigen Namen für den Filter an, und das filter-Attribut des <rect>-Elements verknüpft das Element mit dem Filter „filter“.
Beispiel für das SVG <feGaussianBlur>-Element:
SVG-Abwurfschatten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="200" height="200">
<defs>
<filter id="filter" x="0" y="0" width="250%" height="250%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="coral" stroke-width="5" fill="pink"
filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Hier kann das verschobene Bild mit dem <feGaussianBlur>-Element verwischt werden. Das stdDeviation-Attribut dieses Elements gibt die Stärke der Unschärfe an.
Im folgenden Beispiel wird das in-Attribut des <feOffset>-Elements auf „SourceAlpha“ geändert. Dabei wird der Alpha-Kanal verwendet, um die Unschärfe anzuwenden, anstatt den gesamten RGBA-Pixel.
Beispiel zum Färben des Schattens:
SVG-Abwurfschatten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="200" width="200">
<defs>
<filter id="filter" x="0" y="0" width="150%" height="150%">
<feOffset result="offOut" in="SourceAlpha" dx="15" dy="15" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="120" height="120" stroke="purple" stroke-width="5" fill="pink"
filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Um die Farben im verschobenen Bild zu transformieren, verwenden Sie das <feColorMatrix>-Element.
Beispiel für das <feColorMatrix>-Element:
SVG-Abwurfschatten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="200" width="200">
<defs>
<filter id="filter" x="0" y="0" width="150%" height="150%">
<feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="9" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="purple" stroke-width="5" fill="lightblue"
filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Practice
Was lehrt der Artikel 'SVG-Abwurfschatten' auf W3Docs?