<DEFS>と<フィルター>
すべての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"全体ではなく、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)