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)