SVGのフィルター操作は複数の入力から結果を生成します。生成された結果は、次のフィルター処理の入力として使うこともできます。
入力となるグラフィックスには、SVGのグラフィックス要素と操作によって生成された結果のほかに、 SourceGraphic(ソースグラフィックス)やBackgroundImage(背景イメージ)など次の表に示すものを指定することができます。
SVGのフィルター入力を次の表に示します。
名前 | 意味 |
---|---|
SourceGraphic | ソースグラフィック |
SourceAlpha | ソースの透明度(アルファ値) |
BackgroundImage | 背景イメージ |
BackgroundAlpha | 背景の透明度(アルファ値) |
FillPaint | 塗り潰し色 |
StrokePaint | ストロークの色 |
SVGのフィルター処理に使う要素を次の表に示します。
要素 | 解説 |
---|---|
<feBlend> | グラフィックスを合成(混合)する |
<feColorMatrix > | カラーマトリックス |
<feComponentTransfer> | 色成分を転送する(<feFuncX>のためのコンテナ) |
<feComposite> | グラフィックスを合成する |
<feConvolveMatrix> | コンボリューション(畳み込み)マトリックス |
<feDiffuseLightning> | 拡散照明 |
<feDisplacementMap> | 変位マップ |
<feDistantLight> | 光源 |
<feFlood> | 塗り潰し |
<feGaussianBlur> | グラフィックスをぼかす。 |
<feFuncX> | 転送する成分(<feFuncR>、<feFuncG>、<feFuncB>、<feFuncA>がある) |
<feImage> | イメージ |
<feMerge> | <feMergeNode>のためのコンテナ要素 |
<feMergeNode> | 合成するノード |
<feMorpgology> | モフォロジー |
<feOffset> | グラフィックスを指定されただけずらす |
<fePointLight> | 点光源 |
<feSpecularLighting> | 照明の計算における鏡面反射成分の画像を生成する |
<feSpotLight> | スポットライト |
<feTile> | 入力画像の矩形をタイル状に繰り返し敷き詰める |
<feTurbulence> | Perlin の乱れ関数( Perlin turbulence )を適用した画像を生成する |
フィルターの各要素には共通して次の属性があります。
id | フィルターのID |
---|---|
x、y | フィルターを適用するキャンバスの左上の座標 |
width | フィルターを適用するキャンバスの幅 |
height | フィルターを適用するキャンバスの高さ |
in | グラフィックス入力 |
filterUnits | フィルター領域の単位 |
primitiveUnits | フィルタープリミティブの単位 |
result | フィルター処理をした結果の名前 |
次の例は文字列をぼかして表示するコードの例です。上には比較のためにぼかしていない文字列を表示しています。
<svg width="600" height="140" style="font-size:36px; stroke:black; stroke-width:1px; fill:black">
<defs>
<!-- フィルターの定義 -->
<filter id="blur">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
</filter>
</defs>
<!-- ぼかしてないテキスト -->
<text x="10" y="50">素晴らしいぞSVG!</text>
<!-- ぼかしたテキスト -->
<text x="10" y="100" filter="url(#blur)">こんにちはSVG!</text>
</svg>
次のように表示されます。