SVG 下阴影 2
SVG <feOffset>
滤镜 <feOffset> 也用于创建下阴影效果。思路是获取一个 SVG 图形，并在 xy 平面上稍微移动它。
<feOffset> 和 <feBlend>
第一个示例移动一个矩形（使用 <feOffset>），然后将原始图像与偏移后的图像混合（使用 <feBlend>）。
这是 SVG 代码
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
自己动手试一试 »
代码解释
- 元素
<filter>的id属性定义了滤镜的唯一名称。 - 偏移效果由
<feOffset>元素定义。 in="SourceGraphic"定义了效果是为整个元素创建的。dx属性表示沿 x 轴的偏移。dy属性表示沿 y 轴的偏移。<feBlend>元素通过特定的混合模式将两个图形组合在一起。in2属性定义了混合操作的第二个图像。- <rect> 元素的
filter属性将元素指向 "f1" 滤镜。
使用 <feGaussianBlur> 模糊图像
现在，可以模糊偏移后的图像（使用 <feGaussianBlur>）。
这是 SVG 代码
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
自己动手试一试 »
代码解释
<feGaussianBlur>元素的stdDeviation属性定义了模糊的量。
使阴影变黑
现在，使阴影变黑。
这是 SVG 代码
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f3" width="120" height="120">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
自己动手试一试 »
代码解释
- <feOffset> 元素的
in属性已更改为"SourceAlpha"，它使用 Alpha 通道进行模糊，而不是整个 RGBA 像素。
将阴影视为颜色矩阵
现在，使用 <feColorMatrix> 元素将阴影视为颜色矩阵。
这是 SVG 代码
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f4" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix 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 stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
自己动手试一试 »
代码解释
<feColorMatrix>元素用于根据变换矩阵更改颜色。<feColorMatrix>元素的type属性指示矩阵操作的类型。matrix关键字表示将定义一个完整的 5x4 矩阵值。<feColorMatrix>元素的value属性定义了矩阵类型的值。
