Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
<feDropShadow>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Das <feDropShadow> SVG Filter-Primitive erzeugt einen Schlagschatten des Eingabebildes. Es kann nur innerhalb eines <filter> Elements verwendet werden.
Hinweis:
Die Farbe und Deckkraft des Schattens können durch die Präsentationsattribute flood-color und flood-opacity geändert werden.
Wie andere Filter-Primitives verarbeitet es Farbkomponenten standardmäßig im Farbraum linearRGB. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu nutzen.
Verwendungskontext
Attribute
dx: Dieses Attribut definiert den x-Versatz des Schattens. Wertetyp: <number>; Standardwert:2; Animierbar: jady: Dieses Attribut definiert den y-Versatz des Schattens. Wertetyp: <number>; Standardwert:2; Animierbar: jainstdDeviation: Dieses Attribut definiert die Standardabweichung für die Unschärfeoperation im Schatten. Wertetyp: <number-optional-number>; Standardwert:2; Animierbar: ja- Filter-Primitive-Attribute:
x,y,width,height,result
DOM-Schnittstelle
Dieses Element implementiert die SVGFEDropShadowElement Schnittstelle.
Beispiel
html,
body,
svg {
height: 100%;
}
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
</filter>
<filter id="shadow3">
<feDropShadow
dx="-0.8"
dy="-0.8"
stdDeviation="0"
flood-color="pink"
flood-opacity="0.5" />
</filter>
</defs>
<circle cx="5" cy="50%" r="4" fill="pink" filter="url(#shadow)" />
<circle cx="15" cy="50%" r="4" fill="pink" filter="url(#shadow2)" />
<circle cx="25" cy="50%" r="4" fill="pink" filter="url(#shadow3)" />
</svg>
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # feDropShadowElement |
Browser-Kompatibilität
Enable JavaScript to view this browser compatibility table.
Siehe auch
- SVG Filter-Primitive-Attribute einschließlich
height,in,result,x,y, undwidth. - SVG Präsentationsattribute, einschließlich
flood-color, undflood-opacity.