HTML SVG阴影

<defs>和<filter>

所有 Internet SVG滤镜都在<defs>元素中定义。

<defs>元素是定义的缩写，包含特殊元素(例如滤镜)的定义。

<filter>元素用于定义SVG滤镜。

<filter>元素具有必需的id属性，用于标识滤镜。图形然后指向要使用的滤镜。

<feoffset>

<feoffset>元素用于创建阴影效果：想法是拍摄SVG图形(图像或元素)并将其在xy平面中移动一点，然后将原始图像混合在偏移图像的顶部(使用<feBlend>)。

滤镜的属性：

属性                    作用

x，y                       提供左上角的坐标来定义在哪里渲染滤镜效果。(默认值：0)

width，height         绘制滤镜容器框的高度(默认都为100%)

result                      用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜效果的输入(in)

in                            指定滤镜效果的输入源，可以是某个滤镜导出的result，也可以是下面6个值

 in属性的6个取值

 

feBlend滤镜的模式： 

• normal —— 正常
• multiply —— 正片叠底
• screen —— 滤色
• darken—— 变暗
• lighten —— 变亮

示例：

想要更改滤镜的模式只需要更改mode的值就可以了