SVG 实例大全SVG 模糊效果
SVG 阴影
在SVG中，为了显示阴影效果，使用了 <feOffset>元素。要实现阴影效果，我们取SVG图形并将其在xy平面中移动一点,Internet Explorer和Safari不支持SVG滤镜！
在线示例
下面实现一个紫色的背景阴影效果:
<svg height="250" width="250"> <defs> <filter id="p1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend> </filter> </defs> <rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" /> </svg>测试看看‹/›
注意： Internet Explorer 9和更早版本不支持SVG筛选器。
运行后效果如下:
用法解释
<filter> 的id属性定义了模式的唯一名称。
<rect>元素的filter属性用于将元素链接到“ p1”过滤器。
制作一个黑色的阴影
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>测试看看 ‹/›
运行后效果如下:
注意： Internet Explorer 9和更早版本不支持SVG筛选器。
SVG 实例大全SVG 模糊效果