SVG 阴影
在SVG中，为了显示阴影效果，使用了 <feOffset>元素。要实现阴影效果，我们取SVG图形并将其在xy平面中移动一点,Internet Explorer和Safari不支持SVG滤镜！
在线示例
<svg height="250" width="250">
<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筛选器。
运行后效果如下:
用法解释
制作一个黑色的阴影
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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筛选器。
