在SVG中，為了顯示陰影效果，使用了 <feOffset>元素。要實現(xiàn)陰影效果，我們?nèi)VG圖形并將其在xy平面中移動一點,Internet Explorer和Safari不支持SVG濾鏡！
下面實現(xiàn)一個紫色的背景陰影效果:
<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篩選器。