<DEFS>和<filter>
所有SVG過濾器是一種內定義的<defs>元素。 在<defs>元素是短期的定義和含有特殊元素的定義(such as filters) 。
該<filter>元素用於定義SVG濾鏡。 該<filter>元素標識過濾器所需的id屬性。 然後該圖形指向過濾器使用。
SVG <feOffset>
例1
在<feOffset>元素被用來創建陰影效果。 這個想法是把一個SVG圖形(image or element)和移動一點點在xy平面內。
第一個例子抵消的矩形(with <feOffset>)然後混合原始的偏移圖像的頂部(with <feBlend>)
下面是SVG代碼：
例
<svg height="120" width="120">
<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>
試一試» Code explanation:
- 該id的屬性<filter>元素定義了一個唯一的名稱為過濾器
- 該filter的屬性<rect>元素中的元素鏈接到"f1"過濾器
例2
現在，偏移圖像可以模糊(with <feGaussianBlur>)
下面是SVG代碼：
例
<svg height="140" width="140">
<defs>
<filter id="f2" 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(#f2)" />
</svg>
試一試» Code explanation:
- 該stdDeviation的屬性<feGaussianBlur>元素定義模糊量
例3
現在，讓陰影黑色：
下面是SVG代碼：
例
<svg height="140" width="140">
<defs>
<filter id="f3" 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(#f3)" />
</svg>
試一試» Code explanation:
- 的in所述的屬性<feOffset>元件被改變為"SourceAlpha"它使用Alpha通道的模糊而不是整個的RGBA像素
例4
現在，把陰影的顏色：
下面是SVG代碼：
例
<svg height="140" width="140">
<defs>
<filter id="f4" 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(#f4)" />
</svg>
試一試» Code explanation:
- 在<feColorMatrix>過濾器用於偏移圖像變換顏色接近黑色。 在基體'0.2'的所有三個值獲得由紅，綠和蘭通道相乘。 減少他們的價值觀所帶來的顏色接近黑色(black is 0)