-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
81 lines (61 loc) · 2.43 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
---
title: <feDropShadow>
slug: Web/SVG/Element/feDropShadow
page-type: svg-element
browser-compat: svg.elements.feDropShadow
---
{{SVGRef}}
The SVG **`<feDropShadow>`** filter primitive creates a drop shadow of the input image. It can only be used inside a {{SVGElement('filter')}} element.
> [!NOTE]
> The drop shadow color and opacity can be changed by using the {{SVGAttr('flood-color')}} and {{SVGAttr('flood-opacity')}} presentation attributes.
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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" style="fill:pink; filter:url(#shadow);" />
<circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />
<circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
</svg>
```
{{EmbedLiveSample('Example', 150, '100%')}}
## Attributes
- {{SVGAttr("dx")}}
- : This attribute defines the x offset of the drop shadow.
_Value type_: [**\<number>**](/en-US/docs/Web/SVG/Content_type#number); _Default value_: `2`; _Animatable_: **yes**
- {{SVGAttr("dy")}}
- : This attribute defines the y offset of the drop shadow.
_Value type_: [**\<number>**](/en-US/docs/Web/SVG/Content_type#number); _Default value_: `2`; _Animatable_: **yes**
- {{SVGAttr("stdDeviation")}}
- : This attribute defines the standard deviation for the blur operation in the drop shadow.
_Value type_: [**\<number-optional-number>**](/en-US/docs/Web/SVG/Content_type#number-optional-number); _Default value_: `2`; _Animatable_: **yes**
## Usage context
{{svginfo}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) including {{SVGAttr('height')}}, {{SVGAttr('in')}}, {{SVGAttr('result')}}, {{SVGAttr('x')}}, {{SVGAttr('y')}}, and {{SVGAttr('width')}}.
- [SVG presentation attributes](/en-US/docs/Web/SVG/Attribute#presentation_attributes), including {{SVGAttr('flood-color')}}, and {{SVGAttr('flood-opacity')}}.