SVG 阴影SVG 填充图案
SVG 模糊效果
SVG使用 <feGaussianBlur>元素显示模糊效果。 <feGaussianBlur>滤镜对输入图像进行高斯模糊，Internet Explorer 9和更早版本不支持SVG筛选器.
<svg height="250" width="250"> <defs> <filter id="p1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" /> </svg>测试看看‹/›
运行后生成的图像效果如下：
用法解释
<filter> 的id属性定义了模式的唯一名称。
<feGaussianBlur>元素用于定义模糊效果。
<feGaussianBlur>元素的in =“ SourceGraphic”部分用于定义为整个元素创建的效果。
所述stdDeviation属性用于定义模糊的量。
<rect>元素的filter属性用于将元素链接到“ p1”过滤器。
SVG 阴影SVG 填充图案