css svg滤镜 |css中 img

现在，如果您结合这两种技术，您可以使用CSS为SVG添加滤镜，使您的SVG图像变得更具视觉效果。

/* 添加模糊滤镜 */
.blur-filter{
filter: blur(3px);
}
/* 添加阈值白色滤镜 */
.white-threshold-filter{
filter: url("#white-threshold-filter");
}
/* 添加投影滤镜 */
.shadow-filter{
filter: url("#shadow-filter");
}
/* 添加颜色滤镜 */
.color-filter{
filter: url("#color-filter");
}

上面代码中的 ‘blur-filter’ 将在SVG图像上应用一个3像素的高斯模糊。而 ‘white-threshold-filter’, ‘shadow-filter’ 和 ‘color-filter’ 分别是SVG根据其相应ID定义的阈值白色、阴影和颜色滤镜。在这种情况下，大家使用了已定义的标识符作为CSS的’filter’值。

如果您想定义自己的自定义滤镜，这里是一个例子：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="myFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feOffset dx="8" dy="8" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,0.5)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="10" y="10" width="100" height="100" fill="#3CB371" filter="url(#myFilter)" />
</svg>

上面的代码演示了如何定义自定义滤镜，它是由高斯模糊、颜色填充和对象叠加组成的。结果是，一个带有绿色填充和阴影的矩形，使SVG图像更具视觉吸引力。