SVG 中的阴影效果通常通过滤镜 (<filter>) 元素来实现，使用 feDropShadow 元素来产生阴影。feDropShadow可以为图形元素添加一个类似于 CSS 中的 box-shadow 或 text-shadow 的效果，使图形看起来更加立体和真实。
目录
基本语法
在 SVG 中创建阴影效果，首先需要定义一个 <filter> 元素，其中包含 feDropShadow 元素。然后，将该滤镜应用到一个图形元素。
<svg width="200" height="200">
<defs>
<filter id="shadowEffect">
<feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="gray" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="blue" filter="url(#shadowEffect)" />
</svg>
<filter>：定义滤镜效果的容器。id="shadowEffect"：为滤镜定义一个唯一的 ID，用于引用。<feDropShadow>：应用阴影效果。dx="5"：阴影的水平偏移量。dy="5"：阴影的垂直偏移量。stdDeviation="3"：控制阴影的模糊程度，数值越大，阴影越模糊。flood-color="gray"：阴影的颜色。
阴影效果应用示例
1. 基本阴影
这是一个简单的阴影效果示例，它为圆形元素添加了阴影。
<svg width="200" height="200">
<defs>
<filter id="simpleShadow">
<feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="black" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#simpleShadow)" />
</svg>
- 阴影的偏移量为
dx="10"和dy="10"，使得阴影偏移右下角。 stdDeviation="5"为阴影添加了一些模糊效果，使其看起来更柔和。
2. 阴影颜色和透明度
通过 flood-color 属性，可以控制阴影的颜色。下面的示例展示了如何为阴影添加蓝色，并通过 flood-opacity 调整透明度。
<svg width="200" height="200">
<defs>
<filter id="blueShadow">
<feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="blue" flood-opacity="0.5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="green" filter="url(#blueShadow)" />
</svg>
flood-color="blue"为阴影添加了蓝色。flood-opacity="0.5"使阴影半透明，创建柔和的效果。
3. 阴影与多个元素结合
可以将阴影效果应用于多个元素，以增强视觉效果。以下示例为多个圆形元素应用相同的阴影滤镜。
<svg width="300" height="200">
<defs>
<filter id="multiShadow">
<feDropShadow dx="8" dy="8" stdDeviation="6" flood-color="purple" />
</filter>
</defs>
<circle cx="50" cy="50" r="30" fill="orange" filter="url(#multiShadow)" />
<circle cx="150" cy="50" r="30" fill="yellow" filter="url(#multiShadow)" />
<circle cx="250" cy="50" r="30" fill="pink" filter="url(#multiShadow)" />
</svg>
- 三个不同颜色的圆形元素都应用了相同的阴影效果，使得它们看起来更加统一。
feDropShadow 属性详解
dx：水平偏移量。负值表示阴影偏左，正值表示偏右。dy：垂直偏移量。负值表示阴影偏上，正值表示偏下。stdDeviation：控制阴影的模糊程度。值越大，阴影越模糊，越扩散。flood-color：阴影的颜色。可以使用任何有效的颜色值，如#000000或red。flood-opacity（可选）：阴影的透明度，取值范围是0到1。0表示完全透明，1表示完全不透明。
阴影效果的实际应用
- 文本阴影：为文本添加阴影效果可以增强其可读性和视觉冲击力。
<svg width="300" height="100"> <defs> <filter id="textShadow"> <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="gray" /> </filter> </defs> <text x="50" y="50" font-family="Arial" font-size="40" fill="black" filter="url(#textShadow)"> Hello SVG! </text> </svg> - 按钮阴影：为图形按钮添加阴影，可以使其看起来更具立体感。
<svg width="200" height="100"> <defs> <filter id="buttonShadow"> <feDropShadow dx="5" dy="5" stdDeviation="8" flood-color="black" /> </filter> </defs> <rect x="50" y="30" width="100" height="40" fill="green" filter="url(#buttonShadow)" /> </svg> - 图标阴影：为图标或其他元素添加阴影，以增强深度感。
<svg width="100" height="100"> <defs> <filter id="iconShadow"> <feDropShadow dx="2" dy="2" stdDeviation="4" flood-color="gray" /> </filter> </defs> <circle cx="50" cy="50" r="40" fill="yellow" filter="url(#iconShadow)" /> </svg>
发表回复