フィルター効果モジュール レベル1

1. はじめに

このセクションは規定ではありません

フィルター効果は、要素が文書に描画される際に適用されるグラフィック操作です。これは画像ベースの効果であり、ゼロ個以上の画像を入力として受け取り、効果固有の複数のパラメータを持ち、最終的に画像を出力します。出力画像は、元の要素の代わりに文書に描画されたり、他のフィルター効果への入力画像として使用されたり、CSS画像値として提供されることがあります。

フィルター効果の簡単な例は「flood（塗りつぶし）」です。画像入力は不要ですが、色を定義するパラメータがあります。この効果は、指定した色で完全に塗りつぶされた画像を出力します。もう少し複雑な例は「inversion（反転）」で、1つの画像入力（通常は親要素に通常通り描画された要素の画像）を取り、各ピクセルの色値を反転させます。

フィルター効果は、複雑さの異なる2つのレベルで公開されています：

1. 名前で指定された少数の定型フィルタ関数。これは強力ではありませんが、便利で理解しやすく、ぼかしなど一般的な効果を簡単に実現できます。定型フィルタは[CSS3-ANIMATIONS]でアニメーションすることもできます。

2. マークアップで記述された個々のフィルター効果のグラフで、全体の効果を定義します。このグラフは入力に依存せず、どんなコンテンツにも効果を適用できます。個々の効果は単純でも、グラフ全体として複雑な効果を生み出せます。例を以下に示します。

この例では、画像に<grayscale()>フィルタ関数が適用されています。

#image {
    filter: grayscale(100%);
}

フィルタなし（左）と100%グレースケールフィルタ適用（右）の画像。

以下は個々のフィルター効果のグラフの例です。

フィルター適用オブジェクトの初期例。

この例をSVGで表示

上記の例で使われているフィルター効果を、左列に参照番号付きで、6つのフィルタプリミティブごとに示します：

1 2 3 4 5 6

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <desc>3Dライティング効果を生成します。</desc> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter>

以下の画像は、6つのフィルタ要素ごとの中間画像結果を示します：

元のソースグラフィック

フィルタプリミティブ1適用後

フィルタプリミティブ2適用後

フィルタプリミティブ3適用後

フィルタプリミティブ4適用後

フィルタプリミティブ5適用後

フィルタプリミティブ6適用後

1. フィルタプリミティブfeGaussianBlurは、入力SourceAlpha（ソースグラフィックのアルファチャンネル）を受け取り、結果を"blur"という一時バッファに格納します。"blur"はフィルタプリミティブ2・3両方の入力として使われます。

2. フィルタプリミティブfeOffsetは、バッファ"blur"を、xとy方向に正方向へシフトし、新たなバッファ"offsetBlur"を生成します。この効果はドロップシャドウのようなものです。

3. フィルタプリミティブfeSpecularLightingは、"blur"バッファを表面の高さモデルとして使い、単一の点光源によるライティング効果を生成します。結果はバッファ"specOut"に格納されます。

4. フィルタプリミティブfeCompositeは、フィルタプリミティブ3の結果を元のソースグラフィックのアルファチャンネルでマスクし、中間結果が元のソースグラフィックより大きくならないようにします。

5. フィルタプリミティブfeCompositeは、スペキュラライティングの結果を元のソースグラフィックと合成します。

6. フィルタプリミティブfeMergeは2つのレイヤーを合成します。下層はフィルタプリミティブ2のドロップシャドウ結果、上層はフィルタプリミティブ5のスペキュラライティング結果です。

2. モジュールの相互作用

この仕様は、これらのプロパティが適用された要素の視覚的レンダリングに影響を与えるCSSプロパティ群を定義します。これらの効果は、視覚フォーマットモデル [CSS21]に従い、要素がサイズと配置を決定された後に適用されます。これらのプロパティの一部の値は、包含ブロックやスタッキングコンテキストを生成します。

合成モデルはSVGの合成モデル[SVG11]に従います：最初にフィルター効果が適用され、その後にクリッピング、マスク、透過性[CSS3COLOR]が適用されます。これらの効果は、border [CSS3BG]などの他のCSS効果の後に適用されます。

この仕様の一部プロパティや要素定義はSVG 1.1の実装[SVG11]を必要とします。SVG非対応のUAは、color-interpolation-filters、flood-color、 flood-opacity、lighting-color各プロパティ、およびfilter要素、feMergeNode要素、転送関数要素、フィルタプリミティブ要素を実装してはいけません。

3. 値

この仕様はCSSプロパティ定義規則 [CSS21]に従います。これらの仕様で定義されていない値型はCSS Values and Units Module Level 3 [CSS3VAL]で定義されています。

プロパティ定義で列挙されている値に加え、本仕様で定義されるすべてのプロパティはinheritキーワードも値として受け付けます。可読性のため、明示的に繰り返しません。

4. 用語集

この仕様で使われる用語は、このセクションで定義された意味を持ちます。

フィルタプリミティブ, filter-primitive

filter要素の出力を制御する要素群、特に：feSpotLight、feBlend、feColorMatrix、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feDropShadow、feFlood、 feGaussianBlur、feImage、feMerge、feMorphology、feOffset、feSpecularLighting、feTile、feTurbulence。

パススルーフィルタ

パススルーフィルタの出力はフィルタプリミティブの主入力と同じです。

5. グラフィックフィルター：filterプロパティ

filterプロパティの説明は以下の通りです：

<filter-value-list> = [ <filter-function> | <url> ]+

<url>

filter要素へのフィルタ参照。例：url(commonfilters.svg#filter)。フィルタが存在しないオブジェクトや参照先がfilter要素でない場合、フィルタチェーン全体が無視され、フィルタは適用されません。

<filter-function>

フィルタ関数参照。

none

フィルタ効果は適用されません。

none以外の値をfilterプロパティに指定すると、絶対/固定位置の子孫のための包含ブロックが生成されます（ただし現在の閲覧コンテキストの文書ルート要素でなければ）。関数リストは指定された順に適用されます。

リスト内の最初のフィルタ関数やfilter参照は、要素（SourceGraphic）を入力画像とします。以降の操作は前のフィルタ関数またはfilter参照の出力を入力画像とします。filter要素参照関数は代替入力を指定できますが、前の出力をSourceGraphicとして使います。

color-interpolation-filtersはFilter Functionsには影響しません。Filter FunctionsはsRGB色空間で動作しなければなりません。

none以外の算出値は、CSSopacityと同様にスタッキングコンテキスト [CSS21]が生成されます。要素の子孫はグループとしてまとめてレンダリングされ、フィルタ効果がグループ全体に適用されます。

filterプロパティは、filterが要素のborder box外に描画を生じる場合でも、対象要素のCSSボックスの形状には影響しません。

概念的には、描画のすべての部分がフィルタ操作の影響を受けます。これはフィルタが適用された要素およびその子孫の内容、背景、境界線、テキスト装飾、アウトライン、表示スクロール機構を含みます。フィルタ操作は要素のローカル座標系で適用されます。

合成モデルはSVG合成モデル [SVG11]に従い、最初にフィルタ効果、次にクリッピング、マスク、透過性が適用されます。SVGに従い、filterの適用はヒットテストに影響しません。

filterプロパティはSVG要素にとって表示属性です。

filterは固定背景画像に対してどう動作するか？<https://github.com/w3c/csswg-drafts/issues/238>

6. フィルタ関数

6.1. サポートされるフィルタ関数

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> |    
<grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

特に定義がない限り、省略された値は補間時の初期値になります。

注: 一部のフィルタ関数では、省略された値のデフォルト値が補間時の初期値と異なります。制作者の利便性のため、<grayscale()>、<sepia()>、<invert()>の省略値は1（効果を100%適用）で、補間時の初期値は0（効果なし）です。

blur() = blur( <length>? )

入力画像にガウスぼかしを適用します。渡されたパラメータはガウス関数の標準偏差値を定義します。パラメータはCSS長さで指定しますが、パーセンテージは認められません。この関数のマークアップ等価は下記を参照。

負の値は許可されません。

省略時のデフォルト値は0pxです。

補間時の初期値は0pxです。

注: 標準偏差はbox-shadowのぼかし半径とは異なります。

brightness() = brightness( <number-percentage>? )

入力画像に線形乗算を適用し、明るさを増減します。値0%は完全に黒、100%は元画像のままです。それ以外は効果の線形乗算です。100%以上も可能でより明るくなります。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は1です。

contrast() = contrast( <number-percentage>? )

入力画像のコントラストを調整します。値0%は完全な灰色、100%は元画像、100%以上はより強いコントラストです。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は1です。

drop-shadow() = drop-shadow( <color>? && <length>{2,3} )

入力画像にドロップシャドウ効果を適用します。ドロップシャドウは入力画像のアルファマスクを指定色でぼかしてオフセットしたものを画像の下に合成します。値はbox-shadow [CSS3BG]同様ですが、3番目の長さがぼかし半径でなく標準偏差です。マークアップ等価は下記。

省略値のデフォルトは長さが0、色はcolorプロパティから取得します。

補間時の初期値は長さすべて0、色はtransparentです。

注: spread値や複数シャドウはこの仕様レベルでは受け付けません。

注: 標準偏差はbox-shadowのぼかし半径とは異なります。

grayscale() = grayscale( <number-percentage>? )

入力画像をグレースケール化します。渡されたパラメータは変換の割合を定義します。100%は完全グレースケール、0%は元画像です。0%～100%は線形乗算です。100%以上は許可されますがUAは値を1に丸めます。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は0です。

hue-rotate() = hue-rotate( [ <angle> | <zero> ]? )

入力画像の色相回転を行います。パラメータは色相円周上の度数を定義します。0degは元画像です。実装は360degを超えるアニメーションのため正規化してはいけません。マークアップ等価は下記。

値がゼロなら単位識別子は省略できます。

省略時のデフォルト値は0degです。

補間時の初期値は0degです。

invert() = invert( <number-percentage>? )

入力画像のサンプルを反転します。パラメータは変換割合です。100%で完全反転、0%は元画像。0%～100%は線形乗算。100%以上は許可されますがUAは値を1に丸めます。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は0です。

opacity() = opacity( <number-percentage>? )

入力画像のサンプルに透明度を適用します。パラメータは変換割合です。0%だと完全な透明、100%だと元画像。0%～100%は線形乗算で、入力画像サンプルにamountを掛けます。100%以上も許可されますがUAは値を1に丸めます。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は1です。

注: opacityフィルタ関数はopacityプロパティのショートハンドではありません。中間フィルタプリミティブ結果の透明度を設定できます。最後のフィルタプリミティブがopacityなら、opacityプロパティ値がさらに乗算されるため、より透明になる場合があります。

saturate() = saturate( <number-percentage>? )

入力画像を彩度化します。パラメータは変換割合です。0%は完全な無彩色、100%は元画像。それ以外は線形乗算。100%以上も可能で超彩度になります。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は1です。

sepia() = sepia( <number-percentage>? )

入力画像をセピア化します。パラメータは変換割合です。100%で完全セピア、0%は元画像。0%～100%は線形乗算。100%以上は許可されますがUAは値を1に丸めます。マークアップ等価は下記。

負の値は許可されません。

省略時のデフォルト値は1です。

補間時の初期値は0です。

6.2. フィルタ関数の算出値

<filter-function>の値は指定通り算出されますが、以下の例外があります：

• 省略値は含められ、デフォルト値に算出されます。

• <drop-shadow()>は色の算出値の後に長さの算出値が続きます。

6.3. フィルタ関数の直列化

<filter-function>の直列化は個々の文法に従い、書かれた順序で、<calc()>式は可能な限り避け、フィルタ引数は指定通り直列化し、<calc()>変換は避け、スペース区切りトークンを単一スペースで連結し、カンマの後は必ずスペースを1つ入れます。

6.4. フィルタ関数の補間

<filter-function>値の補間は、以下のリストで最初に一致した条件の手順を実行します：

<blur()>

値は長さとして算出値で補間します。

<brightness()>

<contrast()>

<grayscale()>

<invert()>

<opacity()>

<saturate()>

<sepia()>

パーセンテージ値を数値に変換（0%は0、100%は1）。値は数値として算出値で補間します。

<hue-rotate()>

値は数値として算出値で補間します。

<drop-shadow()>

値はシャドウリストとして繰返しリストで補間します。

7. SVGフィルターソース：filter要素

filter要素の説明は以下の通りです：

<number-optional-number> = <number> <number>?

属性定義:

filterUnits = "userSpaceOnUse | objectBoundingBox"

フィルター領域参照。

primitiveUnits = "userSpaceOnUse | objectBoundingBox"

各種長さ値およびフィルタプリミティブ内の座標系、およびフィルタプリミティブ部分領域属性の座標系を指定します。

primitiveUnitsがuserSpaceOnUseの場合、フィルタ定義内の長さ値は、参照元要素のローカル座標系の値を表します（つまりfilterプロパティで参照される要素のユーザー座標系）。

primitiveUnitsがobjectBoundingBoxの場合、フィルタ定義内の長さ値は参照元要素のバウンディングボックスの割合またはパーセンテージを表します（object bounding box units参照）。<number-optional-number>で指定された値が1つだけの場合、primitiveUnits計算前に展開されます。

primitiveUnitsの初期値はuserSpaceOnUseです。

アニメーション可能：はい

x = "<length-percentage>"

フィルター領域参照。

y = "<length-percentage>"

フィルター領域参照。

width = "<length-percentage>"

フィルター領域参照。

height = "<length-percentage>"

フィルター領域参照。

filterRes = "<number-optional-number>"

filterRes属性は仕様から削除されました。定義はSVG 1.1仕様を参照してください [SVG11]。

プロパティはfilter要素の先祖から継承されますが、参照元要素からは継承されません。

filter要素は直接レンダリングされません。その用途はfilterプロパティで参照されることのみです。displayプロパティはfilter要素には適用されません。そのため、filter要素はdisplayプロパティがnone以外でも直接レンダリングされず、filter要素はdisplayプロパティがnoneの場合でも参照可能です。

8. フィルター領域

filter要素は、所定のフィルター効果が適用されるキャンバス上のフィルター領域を定義でき、ラスター系フィルタプリミティブを処理するための中間連続階調画像の解像度も指定できます。filter要素には、フィルター領域を定義するために連携する以下の属性があります：

filterUnits

属性x、y、width、heightの座標系を定義します。

filterUnitsがuserSpaceOnUseの場合、x、y、width、heightは、filter要素が参照された時点の現在のユーザー座標系（つまり、filter要素をfilterプロパティで参照する要素のユーザー座標系）の値を表します。

filterUnitsがobjectBoundingBoxの場合、x、y、width、heightは、参照元要素のバウンディングボックスの割合またはパーセンテージを表します（object bounding box units参照）。

filterUnits属性の初期値はobjectBoundingBoxです。

アニメーション可能：はい

x, y, width, height

これらの属性は、このフィルターが適用されるキャンバス上の矩形領域を定義します。

これらの属性の座標系は、filterUnits属性の値によって決まります。

この矩形領域の境界は、指定したfilter要素に含まれる各フィルタプリミティブのハードクリッピング領域として機能します。したがって、フィルタプリミティブの効果が矩形領域の外まで広がる場合（例えばfeGaussianBlurフィルタプリミティブで非常に大きなstdDeviationを使用する場合など）、その効果の一部がクリップされます。

xおよびyの初期値は-10%です。

widthおよびheightの初期値は120%です。

ng of the element which referenced the filter.

アニメーション可能：はい

注: filterUnitsの2つの値（objectBoundingBoxとuserSpaceOnUse）のどちらも、フィルター領域の座標系のX軸・Y軸が、フィルターを適用する要素のローカル座標系のX軸・Y軸とそれぞれ平行になります。

注: 実装によっては、フィルター領域がデバイスのピクセルに直接マッピングできる場合、高速なパフォーマンスが可能です。ディスプレイ装置で最良のパフォーマンスのため、領域をユーザーエージェントが背景とピクセル単位で揃えられるよう定義することを推奨します。特にフィルター効果のパフォーマンスのため、ユーザー座標系の回転や傾きを避けてください。

注: フィルター効果がオブジェクトのタイトなバウンディングボックスのすぐ外側にも影響する場合があるため、パディング領域が必要なことが多いです。そのため、x、yには負のパーセンテージ値、widthやheightには100%以上の値を指定できます。これは、フィルター領域のデフォルトがx="-10%" y="-10%" width="120%" height="120%"である理由です。

9. フィルタプリミティブ

9.1. 概要

このセクションでは、特定のフィルター効果を達成するために組み合わせ可能な様々なフィルタープリミティブについて説明します。

特に記載がない限り、すべての画像フィルターはプリマルチプライドRGBAサンプルに対して動作します。feColorMatrixやfeComponentTransferのような一部のフィルターは、非プリマルチプライドデータでより自然に動作します。フィルター操作の間、すべての色値は一時的に現在のフィルターの必要な色乗算に変換されなければなりません。

注: すべての入力画像はプリマルチプライドRGBAであると仮定します。ユーザーエージェントは非プリマルチプライドデータバッファリングを用いてパフォーマンスを最適化しても構いません。

すべてのラスター効果フィルタリング操作は、1〜N個の入力RGBA画像、追加属性をパラメータとして受け取り、単一の出力RGBA画像を生成します。

各フィルタープリミティブから得られるRGBAの結果は、色値および不透明度値の許容範囲にクランプされます。例えば、特定のフィルタープリミティブの結果に負の色値や不透明度値が含まれていた場合、それらはゼロの色／不透明度まで調整されます。

特定のフィルタープリミティブがどの色空間で処理を行うかは、該当するフィルタープリミティブに設定されたプロパティcolor-interpolation-filtersの値によって決定されます。別のプロパティcolor-interpolationは、他の色操作の色空間を決定します。これら2つのプロパティは初期値が異なります（color-interpolation-filtersの初期値はlinearRGBであり、color-interpolationの初期値はsRGBです）。そのため、特定の結果を得るため（例：グラデーション補間とフィルタ処理の連携時など）には、特定の要素でcolor-interpolationをlinearRGBに、またはcolor-interpolation-filtersをsRGBに明示的に設定する必要があります。以下の例ではcolor-interpolationやcolor-interpolation-filtersは明示的に設定されていないため、これらのプロパティの初期値が適用されます。

時折、フィルタープリミティブによって未定義のピクセルが生じます。例えば、フィルタープリミティブfeOffsetは画像を下方向や右方向にシフトさせ、上部や左部に未定義ピクセルが残る場合があります。このような場合、未定義ピクセルは透明な黒に設定されます。

高品質なレンダリングを実現するため、すべてのフィルタープリミティブは、デバイス依存の座標空間（操作座標空間）で、デバイスのピクセル密度、ユーザー空間の変換、ズームを考慮して動作すべきです。プラットフォームに依存しない整列を提供するため、属性やプロパティ値は多くの場合、primitiveUnits属性で記述される座標系に相対的です。ユーザーエージェントはこれらの相対属性やプロパティを操作座標空間にスケールしなければなりません。

注: 高解像度デバイスでは、primitiveUnitsに相対的な属性やプロパティ値は通常スケールアップする必要があります。ユーザーエージェントはプラットフォーム資源が限られている場合、フィルタープリミティブの解像度を下げても構いません。

注: フィルタープリミティブfeConvolveMatrixや光源の属性やプロパティ値の一部は、primitiveUnits属性で定義される座標空間から操作座標空間へ変換できません。

9.2. 共通フィルタプリミティブ属性

以下のフィルタプリミティブ属性は、すべてのフィルタプリミティブで利用できます:

属性定義:

x = "<length-percentage>"

与えられたフィルタプリミティブの計算と描画を制限する部分領域の最小x座標です。フィルタプリミティブ部分領域参照。

x属性の初期値は0%です。

アニメーション可能：はい

y = "<length-percentage>"

与えられたフィルタプリミティブの計算と描画を制限する部分領域の最小y座標です。フィルタプリミティブ部分領域参照。

y属性の初期値は0%です。

アニメーション可能：はい

width = "<length-percentage>"

与えられたフィルタプリミティブの計算と描画を制限する部分領域の幅です。フィルタプリミティブ部分領域参照。

負またはゼロ値は、与えられたフィルタプリミティブの効果を無効化します（結果は透明な黒画像）。

width属性の初期値は100%です。

アニメーション可能：はい

height = "<length-percentage>"

与えられたフィルタプリミティブの計算と描画を制限する部分領域の高さです。フィルタプリミティブ部分領域参照。

負またはゼロ値は、そのフィルタプリミティブの効果を無効化します（結果は透明な黒画像）。

height属性の初期値は100%です。

アニメーション可能：はい

result = "<filter-primitive-reference>"

<filter-primitive-reference>は、<custom-ident> [CSS3VAL]であり、このフィルタプリミティブの割り当て名です。指定された場合、処理結果のグラフィックは同一filter要素内の後続フィルタプリミティブのin属性で参照できます。値が指定されない場合、出力は次のフィルタプリミティブがin属性値を持たない場合にのみ暗黙的な入力として再利用されます。

ほとんどのフィルタプリミティブは他のフィルタプリミティブを入力として受け取ります。以下の属性は、他のフィルタプリミティブを参照するすべての入力属性の代表です:

属性定義:

in = "SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"

与えられたフィルタプリミティブの入力を識別します。値は6つのキーワードのいずれか、または同じfilter要素内の前のresult属性値と一致する文字列のいずれかです。値が指定されず、最初のフィルタプリミティブの場合は、SourceGraphicが入力となります。値が指定されず、後続のフィルタプリミティブの場合は、直前のフィルタプリミティブの結果が入力となります。

resultの値が同じfilter要素内で複数回出現した場合、そのresult参照は最も近い直前の属性値が使用されます。

結果への前方参照は許可されず、指定されなかったものとして扱われます。

存在しない結果への参照も指定されなかったものとして扱われます。

6つのキーワードの定義:

SourceGraphic

このキーワードは、filter要素への元入力となったグラフィックス要素を表します。ラスター効果フィルタプリミティブの場合、グラフィックス要素は画像空間内の初期クリアRGBAラスターにラスタライズされます。元グラフィックで未使用のピクセルはクリアのまま残されます。画像は線形RGBAピクセルでレンダリングされるよう指定されます。アルファチャンネルはSVGで指定されたアンチエイリアスを反映します（ラスターが線形の場合、画像のアルファチャンネルは各ピクセルの正確なカバレッジ率を表します）。

SourceAlpha

このキーワードは、filter要素への元入力となったグラフィックス要素を表します。SourceAlphaは、SourceGraphicと同じルールですが、アルファチャンネルのみが使用されます。入力画像はRGBチャンネルが暗黙的に黒、アルファチャンネルはSourceGraphicと同じです。

注: このオプションを使う場合、アルファチャンネル抽出のためにグラフィックス要素をラスタライズする実装もあります。

BackgroundImage

このキーワードは、フィルター領域の背後に位置する現在のアイソレーショングループで定義された背景を、filter要素が呼び出された時点で表します。isolationプロパティ[COMPOSITING-1]参照。

BackgroundAlpha

BackgroundImageと同様ですが、アルファチャンネルのみが使用されます。SourceAlphaおよびisolationプロパティ[COMPOSITING-1]参照。

FillPaint

このキーワードは、フィルター効果対象要素のfillプロパティ値を表します。FillPaint画像は概念的に無限範囲を持ちます。通常は全面不透明ですが、グラデーションやパターンなど塗り自体が透明または半透明部分を含む場合は不透明でないこともあります。fillがペイントサーバーを参照する場合、ペイントサーバーの座標系はフィルタ対象オブジェクトの座標系となります。例えばペイントサーバーがobjectBoundingBoxを必要とする場合、フィルタ対象オブジェクトのバウンディングボックスが参照サイズとなります。userSpaceOnUseなら、フィルタ対象オブジェクトのローカル座標系で最も近いビューポートが参照サイズになります。

StrokePaint

このキーワードは、フィルター効果対象要素のstrokeプロパティ値を表します。StrokePaint画像は概念的に無限範囲を持ちます。詳細は上記FillPaint参照。

アニメーション可能：はい

9.3. フィルタプリミティブツリー

入力が0または1個のフィルタプリミティブ同士はフィルタチェーンとして連結できます。例えば、2つ以上の<filter-value-list>と<filter-function>のフィルタプリミティブ表現はフィルタチェーンの例です。各フィルタプリミティブは直前のフィルタプリミティブの結果を入力とします。

<filter id="filter">
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
</filter>

複数のフィルタプリミティブ入力を持つフィルタプリミティブもあります。in属性やresult属性を使うことで、複数のフィルタプリミティブを複雑なフィルタ構造に組み合わせることができます。フィルタプリミティブの前方参照制限のため、すべてのフィルタ構造はツリー（フィルタプリミティブツリー）として表現されます。フィルタプリミティブツリーのルートは、filter要素のフィルタプリミティブ子のうち最も後続のプリミティブです。

フィルタチェーンもフィルタプリミティブツリーで表現できるフィルタ構造の一つであり、以降フィルタチェーンもフィルタプリミティブツリーと呼びます。

filter要素は1つ以上のフィルタプリミティブツリーを持つことができます。最も後続のフィルタプリミティブ子が属するフィルタプリミティブツリーが主要フィルタプリミティブツリーです。

主要フィルタプリミティブツリーのみがフィルタ処理に寄与します。実装は他のツリーを無視することがあります。

filter要素にフィルタプリミティブツリーがなければ、フィルタが適用される要素はレンダリングされません。

<filter id="filter">
  <-- The first filter primitive tree. Ignored for filter process. -->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- The primary filter primitive tree. -->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

9.4. フィルタプリミティブ部分領域

すべてのフィルタプリミティブは、x、y、width、height属性を持ち、これらが与えられたフィルタプリミティブの計算・描画を制限するフィルタプリミティブ部分領域を特定します。x、y、width、height属性は、他のフィルタプリミティブの座標・長さ属性と同じ規則で定義されており、primitiveUnits属性で確立された座標系の値を表します。

x、y、width、height属性のデフォルトは、すべての参照ノードに対して定義された部分領域の和（すなわち最も密着したバウンディングボックス）です。参照ノードがない場合（例えばfeImageやfeTurbulence）、または参照ノードのいずれかが標準入力（SourceGraphic、SourceAlpha、BackgroundImage、BackgroundAlpha、FillPaint、StrokePaint）の場合、またはX・Y方向に参照ノードを複製して通常より大きな結果を生成するfeTileの場合、デフォルトの部分領域は0%, 0%, 100%, 100%となり、特別にそのパーセンテージはフィルター領域の寸法に対して相対となるため、デフォルトのフィルタプリミティブ部分領域はフィルター領域と同じになります。

もしフィルタプリミティブ部分領域の幅や高さが負またはゼロなら、そのフィルタプリミティブの効果は無効化されます。

フィルター領域は、フィルタプリミティブの入力画像に対してハードクリップ矩形として作用します。

フィルタプリミティブ部分領域は、フィルタプリミティブの結果に対してハードクリップ矩形として作用します。

すべての中間オフスクリーンは、フィルタプリミティブ部分領域とフィルター領域の交差部分を超えないように定義されます。フィルター領域およびすべてのフィルタプリミティブ部分領域は、ピクセルの一部でもフィルター領域やフィルタプリミティブ部分領域に交差する場合、それらのピクセルを収容できるよう十分な大きさに設定します。

feTileは、前のフィルタプリミティブを参照し、参照されたフィルタプリミティブのフィルタプリミティブ部分領域に基づいてタイルをX・Y方向に並べ、自身のフィルタプリミティブ部分領域を埋めます。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
       <feFlood x="25%" y="25%" width="50%" height="50%"
          flood-color="green" flood-opacity="0.75"/>
    </filter>
    <filter id="blend" primitiveUnits="objectBoundingBox">
       <feBlend x="25%" y="25%" width="50%" height="50%"
          in2="SourceGraphic" mode="multiply"/>
    </filter>
    <filter id="merge" primitiveUnits="objectBoundingBox">
       <feMerge x="25%" y="25%" width="50%" height="50%">
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="FillPaint"/>
       </feMerge>
    </filter>
  </defs>

  <g fill="none" stroke="blue" stroke-width="4">
     <rect width="200" height="200"/>
     <line x2="200" y2="200"/>
     <line x1="200" y2="200"/>
  </g>
  <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>

  <g transform="translate(200 0)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
  </g>

  <g transform="translate(0 200)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
  </g>
</svg>

部分領域の例

この例をSVGで表示

上記の例では、それぞれクロスと円を持つ3つの矩形があります。各矩形内の円要素には異なるフィルタが適用されていますが、同じフィルタプリミティブ部分領域が指定されています。フィルタ出力はフィルタプリミティブ部分領域に制限されるため、円自体は表示されず、フィルタプリミティブ部分領域を構成する矩形のみが見えるはずです。

• 左上の矩形はfeFloodでflood-opacity: 75%が設定されているので、中央の緑色の矩形を通してクロスが見えます。

• 左下の矩形はfeMergeでSourceGraphicとFillPaintを合成しています。円にはfill-opacity="0.5"が指定されているため、中央の緑色の矩形を通してクロスが見えます。

• 右上の矩形はfeBlendでmode="multiply"です。この場合、円は透明でないため、結果は完全に不透明になり、矩形は暗い緑色となりクロスは見えません。

9.5. フィルタプリミティブ feBlend

このフィルターは、一般的な画像編集ソフトウェアのブレンドモードを使って2つのオブジェクトを合成します。2つの入力画像をピクセルごとに合成します。（[COMPOSITING-1]参照）

属性定義:

mode = "<blend-mode>"

「Compositing and Blending Level 1」[COMPOSITING-1]で定義されたブレンドモードのいずれか。入力inがソースCs、2番目の入力in2がバックドロップCbを表します。このフィルタプリミティブの出力Cmは、CsとCbのブレンド結果です。

mode属性の初期値はnormalです。

アニメーション可能：はい

no-composite = "no-composite"

no-composite属性が指定されている場合、指定されたブレンドモードはアルファ合成を行いません。合成なしの「mixing」式はBlending [COMPOSITING-1]参照。それ以外の場合、実装はmodeで指定されたブレンドモードとSource Over合成演算子を組み合わせます。合成ありの「mixing」式はBlending [COMPOSITING-1]参照。

注: この属性はSVG 1.1のfeBlend要素定義への追加です。no-compositeは、入力ソースとフィルタ対象の背景（例：BackgroundImageフィルタプリミティブ）をブレンドする際の「二重合成」効果を避けるために指定します。大半の用途ではno-composite属性の指定は不要です。

アニメーション可能：いいえ

in2 = "(in属性を参照)"

ブレンド操作の2番目の入力画像です。

アニメーション可能：はい

normalブレンドモード（アルファ合成あり）は、feCompositeフィルタプリミティブのoperator="over"と同等であり、feMergeの合成方法や、SVGにおけるフィルタ効果外のすべての合成に使われる単純アルファ合成手法と一致します。

<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feBlend - Examples of feBlend modes</title>
  <desc>feBlendモードの例：5つのテキスト文字列をグラデーションにブレンドし、それぞれ異なるfeBlendモードで表示。</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="498" height="498"/>
  <g isolation="isolate" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
  </g>
</svg>

feBlendの例

この例をSVGで表示

9.6. フィルタプリミティブ feColorMatrix

このフィルターは行列変換を適用します：

入力グラフィックの各ピクセルのRGBA色値とアルファ値に対して、新しいRGBA色値とアルファ値のセットを生成します。

計算は非プリマルチプライド色値で行われます。

属性定義:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

行列操作の種類を示します。キーワードmatrixは、完全な5x4行列値が指定されることを示します。他のキーワードは、よく使われる色操作を完全な行列を指定せずに簡単に利用できるショートカットです。

type属性の初期値はmatrixです。

アニメーション可能：はい。

values = "list of <number>s"

valuesの内容はtype属性の値によって異なります：

• type="matrix"の場合、valuesは20個の行列値（a00 a01 a02 a03 a04 a10 a11 ... a34）で、空白またはカンマで区切ります。例えば単位行列は下記のように記述できます：

  type="matrix"
  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"

• type="saturate"の場合、valuesは実数値1つです。saturate操作は以下の行列操作に相当します：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0.213+\mathrm{0.787s}& 0.715-\mathrm{0.715s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715+\mathrm{0.285s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715-\mathrm{0.715s}& 0.072+\mathrm{0.928s}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  注: 0を指定すると完全に脱彩度（グレースケール）フィルターとなり、1では入力画像がそのまま出力されます。0～1以外の値は入力画像の彩度を下げたり上げたりします。

  注: 輝度係数の精度は以前の仕様文書 [Cmam] より向上しています。

• type="hueRotate"の場合、valuesは実数値1つ（度数）です。hueRotate操作は以下の行列操作に相当します：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}{a}_{00}& a_{01}& a_{02}& 0& 0\\ a_{10}& a_{11}& a_{12}& 0& 0\\ a_{20}& a_{21}& a_{22}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  a00、a01などの項は以下のように計算されます：

  $\left[\begin{array}{ccc}{a}_{00}& a_{01}& a_{02}\\ a_{10}& a_{11}& a_{12}\\ a_{20}& a_{21}& a_{22}\end{array}\right]=\left[\begin{array}{ccc}+0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\end{array}\right]+\cos (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}+0.787& -0.715& -0.072\\ -0.213& +0.285& -0.072\\ -0.213& -0.715& +0.928\end{array}\right]+\sin (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}-0.213& -0.715& +0.928\\ +0.143& +0.140& -0.283\\ -0.787& +0.715& +0.072\end{array}\right]$

  したがって、色相行列の左上の項は次のようになります：

  $a_{00}=0.2127+\cos (\mathit{hueRotate}\mathit{value})\cdot 0.7873-\sin (\mathit{hueRotate}\mathit{value})\cdot 0.2127$

• type="luminanceToAlpha"の場合、values属性は使用しません。luminanceToAlpha操作は以下の行列操作と同等です：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0.2126& 0.7152& 0.0722& 0& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

values属性の初期値

typeがmatrixの場合

デフォルトは単位行列

typeがsaturateの場合

デフォルトは1

typeがhueRotateの場合

デフォルトは0で、結果は単位行列になる

valuesリストのエントリ数がtypeで必要な数と一致しない場合、フィルタプリミティブはパススルーフィルタとして動作します。

アニメーション可能：はい。

<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>feColorMatrixの例 - feColorMatrix操作例</title>
  <desc>feColorMatrixの効果を示す5つのテキスト：
        参照用のフィルタなしテキスト、
        feColorMatrixのmatrixオプションでグレースケール変換、
        feColorMatrixのsaturateオプションの使用、
        feColorMatrixのhueRotateオプションの使用、
        feColorMatrixのluminanceToAlphaオプションの使用。</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="500" y2="0">
      <stop offset="0" stop-color="#ff00ff" />
      <stop offset=".33" stop-color="#88ff88" />
      <stop offset=".67" stop-color="#2020ff" />
      <stop offset="1" stop-color="#d00000" />
    </linearGradient>
    <filter id="Matrix" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values=".33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0"/>
    </filter>
    <filter id="Saturate40" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
    </filter>
    <filter id="HueRotate90" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
    </filter>
    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="498"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="500" height="20" />
    <text x="100" y="90">フィルタなし</text>
    <text x="100" y="190" filter="url(#Matrix)" >Matrix（グレースケール）</text>
    <text x="100" y="290" filter="url(#Saturate40)" >Saturate（彩度40%）</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate（色相90度）</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance（輝度をアルファへ）</text>
  </g>
</svg>

feColorMatrixの例

この例をSVGで表示

9.7. フィルタプリミティブ feComponentTransfer

このフィルタプリミティブは、各成分ごとのデータ再マッピングを以下のように行います：

R' = feFuncR( R )G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

すべてのピクセルに対して。これにより、明るさの調整、コントラストの調整、色バランスやしきい値処理などの操作が可能です。

計算は非プリマルチプライド色値で行われます。

feComponentTransfer要素の子要素は、4つのチャンネルの転送関数を指定します：

• feFuncR - 入力グラフィックの赤成分の転送関数

• feFuncG - 入力グラフィックの緑成分の転送関数

• feFuncB - 入力グラフィックの青成分の転送関数

• feFuncA - 入力グラフィックのアルファ成分の転送関数

feFuncR、feFuncG、feFuncB、feFuncA要素の集合は、転送関数要素とも呼ばれます。

feComponentTransfer要素の処理には以下のルールが適用されます：

• 同じ種類の転送関数要素が複数指定されている場合、最後に現れるものが使用されます。

• いずれかの転送関数要素が未指定の場合、feComponentTransferは、それらの転送関数要素のtype属性がidentityに設定されているものとして処理されなければなりません。

9.7.1. 転送関数 feFuncR

以下の属性は転送関数要素の属性であり、 転送関数要素に適用されます。

属性定義:

type = "identity | table | discrete | linear | gamma"

成分転送関数の種類を示します。関数の種類によって他の属性の適用可否が決まります。

以下で、Cは元の成分（例: feFuncR）、C'は再マッピング後の成分で、どちらも閉区間[0,1]の値です。

• identityの場合:

  C' = C

• tableの場合、関数は属性tableValuesで指定された値間を線形補間して定義されます。テーブルにはn+1個の値（v₀～v_n）があり、n個の等間隔補間領域の開始値・終了値を指定します。補間は以下の式で行います：

  値C < 1について、kを次のように見つけます：

  k/n <= C < (k+1)/n

  結果C'は、

  C' = vk + (C - k/n)*n * (vk+1 - vk)

  C = 1の場合:

  C' = vn.

• discreteの場合、関数は属性tableValuesで指定されたステップ関数で定義されます。リストにはn個の値（v₀～v_n-1）があり、n個のステップからなる関数を示します。ステップ関数は以下の式で定義されます：

  値C < 1について、kを次のように見つけます：

  k/n <= C < (k+1)/n

  結果C'は、

  C' = vk

  C = 1の場合:

  C' = vn-1.

• linearの場合、関数は以下の一次式で定義されます：

  C' = slope * C + intercept

• gammaの場合、関数は以下の指数関数で定義されます：

  C' = amplitude * pow(C, exponent) + offset

type属性の初期値はidentityです。

アニメーション可能：はい。

tableValues = "(リスト形式の <number>s)"

type="table"の場合、空白またはカンマ区切りの<number>のリストv0,v1,...vnで、ルックアップテーブルを定義します。空リストの場合、identity転送関数となります。

属性が指定されていない場合、空リストが与えられたものとして扱います。

アニメーション可能：はい。

slope = "<number>"

type="linear"の場合、一次関数の傾き。

slope属性の初期値は1です。

アニメーション可能：はい。

intercept = "<number>"

type="linear"の場合、一次関数の切片。

intercept属性の初期値は0です。

アニメーション可能：はい。

amplitude = "<number>"

type="gamma"の場合、ガンマ関数の振幅。

amplitude属性の初期値は1です。

アニメーション可能：はい。

exponent = "<number>"

type="gamma"の場合、ガンマ関数の指数。

exponent属性の初期値は1です。

アニメーション可能：はい。

offset = "<number>"

type="gamma"の場合、ガンマ関数のオフセット。

offset属性の初期値は0です。

アニメーション可能：はい。

<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <title>feComponentTransferの例 - feComponentTransfer操作例</title>
  <desc>feComponentTransferの効果を示す4つのテキスト：
        参照用のidentity関数、
        feComponentTransferのtableオプションの使用、
        feComponentTransferのlinearオプションの使用、
        feComponentTransferのgammaオプションの使用。</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
    <filter id="Table" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"/>
        <feFuncG type="table" tableValues="1 1 0 0"/>
        <feFuncB type="table" tableValues="0 1 1 0"/>
      </feComponentTransfer>
    </filter>
    <filter id="Linear" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25"/>
        <feFuncG type="linear" slope=".5" intercept="0"/>
        <feFuncB type="linear" slope=".5" intercept=".5"/>
      </feComponentTransfer>
    </filter>
    <filter id="Gamma" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="600" height="20" />
    <text x="100" y="90">Identity（恒等関数）</text>
    <text x="100" y="190" filter="url(#Table)" >TableLookup（テーブル補間）</text>
    <text x="100" y="290" filter="url(#Linear)" >LinearFunc（一次関数）</text>
    <text x="100" y="390" filter="url(#Gamma)" >GammaFunc（ガンマ関数）</text>
  </g>
</svg>

feComponentTransferの例

この例をSVGで表示

9.7.2. 転送関数 feFuncG

属性値の定義についてはfeFuncRを参照してください。

9.7.3. 転送関数 feFuncB

属性値の定義についてはfeFuncRを参照してください。

9.7.4. 転送関数 feFuncA

属性値の定義についてはfeFuncRを参照してください。

9.8. フィルタプリミティブ feComposite

このフィルタは、Porter-Duff [PORTERDUFF] 合成演算のいずれか（over、in、atop、out、xor、lighter [COMPOSITING-1]）を用いて、画像空間内の2つの入力画像の各ピクセルを合成します。さらに、成分ごとのarithmetic演算（結果は[0..1]範囲にクランプ）が利用できます。

arithmetic演算は、feDiffuseLighting や feSpecularLighting フィルタの出力をテクスチャデータと組み合わせる際に便利です。また、dissolveの実装にも役立ちます。arithmetic演算が選択された場合、各結果ピクセルは以下の式で計算されます：

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

ここで：

• i1、i2は入力画像の該当するピクセルチャンネル値で、それぞれinとin2に対応します。

• k1, k2, k3、k4は同名の属性値です。

このフィルタプリミティブでは、生成画像の範囲がフィルタプリミティブサブリージョンの説明通り拡大する場合があります。

属性定義:

operator = "over | in | out | atop | xor | lighter | arithmetic"

合成演算の種類を指定します。arithmetic以外のoperatorタイプは、[COMPOSITING-1]で説明されている対応演算と一致し、inがソース、in2がデスティネーションとなります。arithmetic演算は上記参照。

operator属性の初期値はoverです。

アニメーション可能：はい。

k1 = "<number>"

operator="arithmetic"の場合のみ有効。

k1属性の初期値は0です。

アニメーション可能：はい。

k2 = "<number>"

operator="arithmetic"の場合のみ有効。

k2属性の初期値は0です。

アニメーション可能：はい。

k3 = "<number>"

operator="arithmetic"の場合のみ有効。

k3属性の初期値は0です。

アニメーション可能：はい。

k4 = "<number>"

operator="arithmetic"の場合のみ有効。

k4属性の初期値は0です。

アニメーション可能：はい。

in2 = "(see in 属性参照)"

合成演算の2番目の入力画像。

アニメーション可能：はい。

注: Compositing and Blending [COMPOSITING-1] では、さらに多くの合成キーワードが定義されています。追加のキーワードの機能は、入力フィルタプリミティブ in と in2 を切り替えることで実現できます。

<svg width="330" height="195" viewBox="0 0 1100 650"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>feCompositeの例 - feComposite演算の例</title>
  <desc>異なる不透明度および背景クリア有無における
        6種類のfeComposite演算子を、重なった三角形ペア6組の4行で示します。</desc>
  <defs>
    <desc>6つの合成演算子それぞれに対して、6フィルタからなる2セットを定義します。
          1つ目のセットは不透明な白で塗りつぶして背景画像を消去します。
          2つ目のセットは背景を消去しないため、背景が見える場合があるほか、
          別の場合には背景画像が自身にブレンドされます（「二重カウント」）。</desc>
    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
    </filter>
    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
    </filter>
    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
    </filter>
    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
    </filter>
    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
    </filter>
    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
    </filter>
    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
    <g id="TwoBlueTriangles">
      <use xlink:href="#Blue100"/>
      <use xlink:href="#Blue50"/>
    </g>
    <g id="BlueTriangles">
      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
    </g>
  </defs>

  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
    <desc>不透明な白い面の上に描画して背景を消すフィルタを用いて、例をレンダリングします。</desc>
    <g isolation="isolate">
      <text x="15" y="75">不透明度 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood あり)</text>
      <text x="15" y="200">不透明度 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood あり)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overFlood)" />
        <use xlink:href="#Red50" filter="url(#overFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inFlood)" />
        <use xlink:href="#Red50" filter="url(#inFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outFlood)" />
        <use xlink:href="#Red50" filter="url(#outFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopFlood)" />
        <use xlink:href="#Red50" filter="url(#atopFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorFlood)" />
        <use xlink:href="#Red50" filter="url(#xorFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
    <g transform="translate(0,325)" isolation="isolate">
    <desc>背景を消さないフィルタを用いて例をレンダリングします。
          その結果、背景が見え続ける場合があるほか、別の場合には背景画像が自身にブレンドされます（「二重カウント」）。</desc>
      <text x="15" y="75">不透明度 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood なし)</text>
      <text x="15" y="200">不透明度 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood なし)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
  </g>
</svg>

feCompositeの例

この例をSVGで表示

9.9. フィルタプリミティブ feConvolveMatrix

feConvolveMatrixは行列畳み込みフィルター効果を適用します。畳み込みは入力画像のピクセルを隣接ピクセルと組み合わせて、結果画像を生成します。ぼかし、エッジ検出、シャープ化、エンボス、ベベルなど、幅広い画像処理操作が畳み込みによって実現可能です。

行列畳み込みはn×mの行列（畳み込みカーネル）に基づいており、入力画像のピクセル値がどのように隣接ピクセル値と組み合わされて結果ピクセル値を生成するかを記述します。各結果ピクセルは、カーネル行列を対応するソースピクセルとその隣接ピクセルに適用することで決定されます。各ピクセルの色値に適用される基本的な畳み込み式は以下の通りです:

ここで「orderX」と「orderY」はorder属性のXおよびYの値を表し、「targetX」はtargetX属性の値を表し、「targetY」はtargetY属性の値を表し、「kernelMatrix」はkernelMatrix属性の値を表し、「divisor」はdivisor属性の値を表し、「bias」はbias属性の値を表します。

上記の式では、カーネル行列の値が適用される際、カーネル行列は畳み込み理論に一致するようにソース画像および出力画像に対して180度回転されることが多くのコンピュータグラフィックスの教科書で説明されています。

例を挙げると、入力画像が5ピクセル×5ピクセルで、その色チャンネルの1つの色値が以下のようであると仮定します:

そして、次のように3×3の畳み込みカーネルを定義します:

画像の2行目2列目の色値に注目しましょう（ソースピクセル値は120です）。 入力画像のピクセルグリッドがカーネルのピクセルグリッドと完全に一致する最も単純な場合を仮定し、 またdivisor、 targetX、 およびtargetY属性のデフォルト値を仮定すると、 結果として得られる色値は次のようになります：

行列畳み込みはピクセルに対して動作するため、本質的に解像度に依存します。feConvolveMatrixで解像度に依存しない結果を得るには、属性kernelUnitLengthに明示的な値を指定する必要があります。

kernelUnitLengthは他の属性と組み合わせて、フィルタ効果の座標系（すなわち、primitiveUnits属性によって確立される座標系）における暗黙のピクセルグリッドを定義します。入力画像は一時的にリスケールされ、ピクセルがkernelUnitLengthに一致するように調整されます。畳み込みはリサンプリングされた画像に対して行われます。畳み込みを適用した後、画像は元の解像度に再サンプリングされます。

畳み込みの前に画像をkernelUnitLengthで定義された座標系に合わせて再サンプリングする必要がある場合、または畳み込みの後にデバイス座標系に合わせて再サンプリングする必要がある場合には、高品質なビューアは適切な補間手法（例えばバイリニアやバイキュービック）を用いることが推奨されます。利用可能な補間器の速度に応じて、この選択はimage-renderingプロパティの設定に影響される可能性があります。実装によっては、適切な結果を得るのに再サンプリングが不要な場合（例えば、ドキュメントが縮小表示されてkernelUnitLengthがデバイスピクセルよりもかなり小さくなる場合など）には、再サンプリングを最小化または省略するアプローチを選択することがあります。

属性の定義:

order = "<number-optional-number>"

kernelMatrixの各次元におけるセル数を示します。指定する値は、ゼロより大きい<integer>でなければなりません。整数でない値は切り捨てられ（すなわち、ゼロ方向に最も近い整数に丸められ）ます。最初の数値<orderX>は行列の列数を示し、2番目の数値<orderY>は行列の行数を示します。<orderY>が指定されない場合は、<orderX>が既定値になります。

小さい値（例：3）のみを使用することが推奨されます。大きな値は非常に高いCPUオーバーヘッドを招き、通常はパフォーマンスへの影響を正当化できる結果をもたらしません。

初期値はorderに対して3です。

アニメーション可能: はい。

kernelMatrix = "<list of numbers>"

畳み込み用のカーネル行列を構成する<number>のリストです。値は空白文字および/またはカンマで区切ります。リスト内のエントリ数は、<orderX>と<orderY>の積に等しくなければなりません。

orderX * orderYの結果が値リストのエントリ数と一致しない場合、このフィルタプリミティブはパススルーフィルタとして動作します。

値リスト内のエントリ数が不正な場合はどのように振る舞うべきか？ <https://github.com/w3c/csswg-drafts/issues/237>

アニメーション可能: はい。

divisor = "<number>"

入力画像にkernelMatrixを適用して得られた数値を、divisorで割ることで、最終的な出力色値を得ます。行列値の総和をdivisorとすると、結果の全体的な色強度を均す効果が得られる傾向があります。指定されたdivisorが0の場合は、代わりに既定値が使用されます。

初期値は、kernelMatrix内のすべての値の総和です。ただし、その総和が0の場合はdivisorを1に設定します。

アニメーション可能: はい。

bias = "<number>"

入力画像にkernelMatrixを適用して数値を得てから、divisorを適用した後、各コンポーネントにbias属性の値を加えます。biasの用途の一つは、フィルタのゼロ応答を.5のグレー値にしたい場合です。biasプロパティはフィルタの出力範囲をシフトし、通常は0または1にクランプされてしまう値の表現を可能にします。

初期値（bias）は0です。

アニメーション可能: はい。

targetX = "<integer>"

入力画像の特定の対象ピクセルに対して、畳み込み行列のX方向の位置を決定します。行列の最左列は列番号0です。値は 0 <= targetX < orderX を満たさなければなりません。既定では、畳み込み行列は入力画像の各ピクセルに対してX方向に中心配置されます（すなわち、targetX = floor ( orderX / 2 )）。

アニメーション可能: はい。

targetY = "<integer>"

入力画像の特定の対象ピクセルに対して、畳み込み行列のY方向の位置を決定します。行列の最上行は行番号0です。値は 0 <= targetY < orderY を満たさなければなりません。既定では、畳み込み行列は入力画像の各ピクセルに対してY方向に中心配置されます（すなわち、targetY = floor ( orderY / 2 )）。

アニメーション可能: はい。

edgeMode = "duplicate | wrap | none"

カーネルが入力画像の端または端付近に位置する際に行列演算を適用できるよう、必要に応じて入力画像をどのように色値で拡張するかを決定します。

duplicateは、入力画像の各境界に沿って、当該端にある色値を複製することで必要に応じて入力画像を拡張することを示します。

元の N×M 画像（m=M-1、n=N-1）の場合:

$\left[\begin{array}{ccccc}11& 12& \text{.}\text{.}\text{.}& 1m& 1M\\ 21& 22& \text{.}\text{.}\text{.}& 2m& 2M\\ \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}\\ n1& n2& \text{.}\text{.}\text{.}& \mathrm{nm}& \mathrm{nM}\\ N1& N2& \text{.}\text{.}\text{.}& \mathrm{Nm}& \mathrm{NM}\end{array}\right]$

duplicate を使用して2ピクセル拡張：

$\left[\begin{array}{ccccccccc}11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 21& 21& 21& 22& \dots & 2m& 2M& 2M& 2M\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ n1& n1& n1& n2& \dots & \mathrm{nm}& \mathrm{nM}& \mathrm{nM}& \mathrm{nM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\end{array}\right]$

wrap は、入力画像が画像の反対側の端から色値を取り込むことで拡張されることを示します。

wrap を使用して2ピクセル拡張:

$\left[\begin{array}{ccccccccc}\mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\end{array}\right]$

値noneは、入力画像がR、G、B、Aのピクセル値をゼロで拡張することを示します。

初期値はedgeModeに対してduplicateです。

アニメーション可能: はい。

kernelUnitLength = "<number-optional-number>"

最初の数値は<dx>値を表します。2番目の数値は<dy>値を表します。<dy>値が指定されていない場合、<dx>値と同じ値がデフォルトとなります。primitiveUnits属性によって決定される単位（現在のフィルタ単位）で、kernelMatrix内の連続する列と行の間の意図された距離を示します。kernelUnitLengthに値を指定することで、カーネルが拡張可能な抽象座標系で定義されます。kernelUnitLengthが指定されていない場合、デフォルト値はオフスクリーンビットマップの1ピクセルであり、これはピクセルベースの座標系であるため、拡張性がない可能性があります。表示メディアやユーザーエージェント間での一貫性をある程度確保するために、kernelUnitLengthに値を指定する必要があります。一部の実装では、一時的なオフスクリーン画像のピクセルグリッドがカーネルのピクセルグリッドと整列する場合、最も一貫性のある結果と最速のパフォーマンスが得られます。

負の値またはゼロ値が指定された場合、デフォルト値が使用されます。

注: この属性は非推奨であり、削除される予定です。プラットフォームに依存しない結果を作成する信頼性のある方法を提供しません。この仕様の将来のバージョンでは、この使用ケースをカバーする予定です。

アニメーション可能: はい。

preserveAlpha = "false | true"

falseの値は、畳み込みがアルファチャネルを含むすべてのチャネルに適用されることを示します。この場合、特定のピクセルに対する畳み込み式のALPHAX,Yは以下の通りです:

ALPHAX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias


値が"true"の場合、畳み込みは色チャネルのみに適用されます。この場合、フィルタは一時的に色成分値のプリマルチプライを解除し、カーネルを適用します。この場合、特定のピクセルに対する畳み込み式のALPHAX,Yは以下の通りです:

ALPHAX,Y = SOURCEX,Y

初期値はpreserveAlphaに対してfalseです。

アニメーション可能: はい。