SVG 阴影 2
SVG <feOffset>
The <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属性定义矩阵类型的值。
