Latest web development tutorials

SVG 陰影

注意: Internet Explorer和Safari不支持SVG濾鏡!


<defs> 和<filter>

所有互聯網的SVG濾鏡定義在<defs>元素中。 <defs>元素定義短並含有特殊元素(如濾鏡)定義。

<filter>標籤用來定義SVG濾鏡。 <filter>標籤使用必需的id屬性來定義向圖形應用哪個濾鏡?


SVG <feOffset>

實例1

<feOffset>元素是用於創建陰影效果。 我們的想法是採取一個SVG圖形(圖像或元素)並移動它在xy平面上一點兒。

第一個例子偏移一個矩形(帶<feOffset>),然後混合偏移圖像頂部(含<feBlend>):

feoffset

下面是SVG代碼:

實例

<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="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

嘗試一下»

對於Opera用戶: 查看SVG文件 (右鍵單擊SVG圖形預覽源)。

代碼解析:

  • <filter>元素id屬性定義一個濾鏡的唯一名稱
  • <rect>元素的濾鏡屬性用來把元素鏈接到"f1"濾鏡

實例2

現在,偏移圖像可以變的模糊(含<feGaussianBlur>):

feoffset2

下面是SVG代碼:

實例

<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="SourceGraphic" 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>

嘗試一下»

對於Opera用戶: 查看SVG文件 (右鍵單擊SVG圖形預覽源)。

代碼解析:

  • <feGaussianBlur>元素的stdDeviation屬性定義了模糊量

實例3

現在,製作一個黑色的陰影:

feoffset3

下面是SVG代碼:

實例

<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>

嘗試一下»

對於Opera用戶: 查看SVG文件 (右鍵單擊SVG圖形預覽源)。

代碼解析:

  • <feOffset>元素的屬性改為"SourceAlpha"在Alpha通道使用殘影,而不是整個RGBA像素。

實例4

現在為陰影塗上一層顏色:

feoffset4

下面是SVG代碼:

實例

<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="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" 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>

嘗試一下»

對於Opera用戶: 查看SVG文件 (右鍵單擊SVG圖形預覽源)。

代碼解析:

  • <feColorMatrix>過濾器是用來轉換偏移的圖像使之更接近黑色的顏色。 '0.2'矩陣的三個值都獲取乘以紅色,綠色和藍色通道。 降低其值帶來的顏色至黑色(黑色為0)