SVG 阴影
<定义> 和 <过滤器>
所有 SVG 过滤器都在 <defs> 元素中定义。 <defs> 元素是定义的缩写，包含特殊元素（例如过滤器）的定义。
<filter> 元素用于定义 SVG 过滤器。 <filter> 元素有一个必需的 id 属性，用于标识过滤器。然后该图形指向要使用的过滤器。
SVG <feOffset>
示例1
<feOffset> 元素用于创建投影效果。这个想法是获取一个 SVG 图形（图片或元素）并在 xy 平面上稍微移动它。
第一个示例偏移一个矩形（使用 <feOffset>），然后将原始图片混合到偏移图片的顶部（使用 <feBlend>）：
这是 SVG 代码：
示例
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
亲自试一试 »
代码解释：
- <filter> 元素的 id 属性定义了过滤器的唯一名称
- <rect> 元素的过滤器属性将该元素链接到 "f1" 过滤器
示例2
现在，偏移图片可以被模糊（使用 <feGaussianBlur>）：
这是 SVG 代码：
示例
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
亲自试一试 »
代码解释：
- <feGaussianBlur> 元素的 stdDeviation 属性定义模糊量
示例3
现在，将阴影设为黑色：
这是 SVG 代码：
示例
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
亲自试一试 »
代码解释：
- <feOffset> 元素的 in 属性更改为 "SourceAlpha"，它使用 Alpha 通道而不是整个 RGBA 像素进行模糊
示例4
现在，将阴影视为一种颜色：
这是 SVG 代码：
示例
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<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="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
亲自试一试 »
代码解释：
- <feColorMatrix> 滤镜用于将偏移图片中的颜色转换为更接近黑色。矩阵中“0.2”的三个值都乘以红色、绿色和蓝色通道。减少它们的值会使颜色更接近黑色（黑色为 0）