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

1. はじめに

この節は規範的ではない

フィルター効果とは、要素が文書内に描画される際に適用されるグラフィカルな操作である。これは 画像ベースの効果であり、0 個以上の画像を入力として受け取り、効果に固有の複数のパラメーターを使用して、 画像を出力として生成する。出力画像は、元の要素の代わりに文書内にレンダリングされるか、 別のフィルター効果への入力画像として使用されるか、または CSS 画像値として提供される。

フィルター効果の単純な例として「フラッド」がある。これは画像を入力として受け取らないが、 色を定義するパラメーターを持つ。この効果は、指定された色で完全に塗りつぶされた出力画像を生成する。もう少し 複雑な例として「反転」があり、これは単一の画像を入力として受け取り（通常は、要素が 通常その親にレンダリングされる場合の画像）、各ピクセルが反対の色値を持つように 調整する。

フィルター効果は、次の 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

フィルター効果は適用されない。

filter プロパティに none 以外の値を指定すると、絶対配置および固定配置された子孫のための 包含ブロックが作成される。ただし、 それが適用される要素が現在の 閲覧コンテキストにおける文書のルート要素である場合を除く。関数のリストは、 指定された順序で適用される。

リスト内の最初のフィルター関数または filter 参照は、要素（SourceGraphic）を入力画像として受け取る。それ以降の操作は、 直前のフィルター関数または filter 参照の出力を入力画像として受け取る。filter 要素参照 関数は別の入力を指定できるが、それでも前の出力を自身の SourceGraphic として使用する。

color-interpolation-filters は フィルター関数には影響しない。フィルター関数は sRGB 色空間で動作しなければならない。

none 以外の算出値は、CSS の opacity と同じ方法で 積み重ねコンテキスト [CSS21] の作成をもたらす。 要素のすべての子孫はグループとしてまとめてレンダリングされ、フィルター効果はグループ全体に 適用される。

filter プロパティは、filter によって 要素のボーダーボックスの外側に描画が発生する場合でも、対象要素の 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 番目の <length> 値はぼかし半径ではなく標準偏差となる。この関数に相当するマークアップは 以下に示す。

省略された値の既定値は、欠けている長さ値を 0 に設定し、 欠けている使用色は color プロパティから取得する。

補間用の 初期値は、すべての長さ値を 0 に設定し、使用色を transparent に設定したものとなる。

注: このレベルの仕様では、 拡散値または複数の影は受け付けない。

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

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

入力画像をグレースケールに変換する。渡されたパラメーターは変換の割合を定義する。 100% の値では完全にグレースケールになる。0% の値では入力は変更されない。0% から 100% の間の値は効果に対する線形乗数となる。100% を超える量の値も許可されるが、UA は値を 1 にクランプしなければならない。 この関数に相当するマークアップは以下に示す。

負の値は許可されない。

省略時の既定値は 1。

補間用の 初期値は 0。

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

入力画像に色相回転を適用する。渡されたパラメーターは、入力サンプルが 色相環に沿って調整される度数を定義する。0deg の値では 入力は変更されない。360deg を超えるアニメーションを可能にするため、 実装はこの値を正規化してはならない。この関数に相当するマークアップは以下に示す。

<angle> がゼロの場合、単位識別子を省略してもよい。

省略時の既定値は 0deg。

補間用の 初期値は 0deg。

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

入力画像内のサンプルを反転する。渡されたパラメーターは 変換の割合を定義する。100% の値では完全に反転する。0% の値では 入力は変更されない。0% から 100% の間の値は効果に対する線形乗数となる。100% を超える量の値も 許可されるが、UA は値を 1 にクランプしなければならない。この 関数に相当するマークアップは以下に示す。

負の値は許可されない。

省略時の既定値は 1。

補間用の 初期値は 0。

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

入力画像内のサンプルに透明度を適用する。渡されたパラメーターは 変換の割合を定義する。0% の値では完全に透明になる。100% の値では入力は変更されない。0% から 100% の間の値は効果に対する線形乗数となる。これは、 入力画像のサンプルに量を乗算することと等価である。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()> は、<color> の算出値から始まり、その後に <length> 値の算出値が続く。

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

<filter-function> を直列化するには、各 文法が記述されている順序で、それぞれの文法に従って直列化し、可能な場合は <calc()> 式を避け、指定どおりにフィルター引数を直列化し、 <calc()> 変換を避け、 空白で区切られたトークンを単一の空白で結合し、直列化された各コンマの後に単一の空白を置く。

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 要素が参照された時点で有効な現在の ローカル座標系の値を表す（すなわち、filter プロパティを介して filter 要素を参照する要素のユーザー座標系）。

primitiveUnits が objectBoundingBox と等しい場合、 フィルター定義内のすべての長さ値は、参照元要素のバウンディングボックスの分数またはパーセンテージを表す （オブジェクトバウンディングボックス単位を参照）。<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 要素は 直接レンダリングされることはなく、唯一の用途は filter プロパティを使って参照できるものとして使用することである。display プロパティは filter 要素には適用されない。したがって、filter 要素は、display プロパティが none 以外の値に設定されていても直接レンダリングされず、filter 要素は、 display プロパティが filter 要素またはその祖先のいずれかで none に設定されている場合でも参照可能である。

8. フィルター領域

filter 要素は、 指定されたフィルター効果が適用されるキャンバス上の フィルター 領域を定義でき、ラスター方式の フィルタープリミティブの処理に使用される 中間連続階調画像の解像度を提供できる。filter 要素には、フィルター領域を定義するために連携して機能する次の属性がある:

filterUnits

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

filterUnits が userSpaceOnUse と等しい場合、x、y、width、height は、filter 要素が参照された時点で有効な現在のユーザー座標系の値を表す（すなわち、filter プロパティを介して filter 要素を参照する要素のユーザー座標系）。

filterUnits が objectBoundingBox と等しい場合、x、y、width、height は参照元要素のバウンディングボックスの分数またはパーセンテージを表す（オブジェクトバウンディングボックス単位を参照）。

filterUnits の 初期値は objectBoundingBox である。

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

x, y, width, height

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

これらの属性の座標系は、属性 filterUnits の値に依存する。

この矩形の境界は、指定された filter 要素に含まれる各 フィルタープリミティブに対して強制的なクリッピング領域として機能する。したがって、指定されたフィルター プリミティブの効果が矩形の境界を超えて広がる場合（これは非常に大きな stdDeviation を持つ feGaussianBlur フィルタープリミティブを使用するときに起こることがある）、 効果の一部はクリップされる。

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

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

フィルターを参照した要素の ng。

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

注: 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 とすべて同じ規則に従う。 入力画像は RGBA 画像であり、RGB チャンネルには暗黙的に黒の色値が含まれるが、 アルファチャンネルは SourceGraphic と同じである。

注: このオプションを使用する場合、一部の実装では アルファチャンネルを抽出するためにグラフィックス要素をラスタライズする必要がある場合がある。

BackgroundImage

このキーワードは、filter 要素が呼び出された時点で、フィルター領域の背後にある現在の分離グループによって定義された背景を表す。isolation プロパティ [COMPOSITING-1] を参照。

BackgroundAlpha

アルファチャンネルのみを使用する点を除き、BackgroundImage と同じ。SourceAlpha および isolation プロパティ [COMPOSITING-1] を参照。

FillPaint

このキーワードは、フィルター 効果の対象要素における fill プロパティの値を表す。FillPaint 画像は概念上無限の 広がりを持つ。多くの場合、この画像はどこでも不透明であるが、「paint」 自体がアルファを持つ場合、たとえばグラデーションまたはパターン自体に透明または半透明の部分が含まれる場合には、不透明でないこともある。fill がペイントサーバーを参照する場合、ペイントサーバーの座標空間はフィルター対象オブジェクトに対して定義された座標 空間となる。たとえば、ペイントサーバーがオブジェクトの objectBoundingBox を使用する必要がある場合、 フィルター対象オブジェクトのオブジェクトバウンディングボックスがペイントサーバーの基準サイズを定義する。 ペイントサーバーが userSpaceOnUse を使用する必要がある場合、 フィルター対象オブジェクトの ローカル座標系内の最も近いビューポートが ペイントサーバーの基準サイズを定義する。

StrokePaint

このキーワードは、フィルター 効果の対象要素における stroke プロパティの値を表す。StrokePaint 画像は概念上 無限の広がりを持つ。詳細については、上記の FillPaint を参照。

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

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

フィルタープリミティブの入力がない、または 1 つであるフィルタープリミティブは、連結してフィルターチェーンを構成できる。たとえば、 2 つ以上の <filter-function> を持つ <filter-value-list> のフィルタープリミティブ表現は、フィルターチェーンの例である。各 フィルタープリミティブは、直前のフィルタープリミティブの結果を入力として受け取る。

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

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

フィルターチェーンは、フィルタープリミティブツリーとして表現することもできるフィルター構造の一形態である。 したがって、これ以降、フィルターチェーンもフィルタープリミティブツリーと呼ぶ。

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

フィルター処理に寄与するのは主フィルタープリミティブツリーだけである。実装は、 その他の可能なすべてのフィルタープリミティブツリーを無視してもよい。

filter 要素にフィルタープリミティブツリーがない場合、フィルターが適用される要素はレンダリングされない。

<filter id="filter">
  <-- 最初の フィルター プリミティブ ツリー。 フィルター 処理では 無視される。 -->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- 主 フィルター プリミティブ ツリー。 -->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

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

すべての フィルタープリミティブは、 属性 x、y、width、および height を持ち、これらが合わせて、指定された フィルタープリミティブの計算およびレンダリングを制限する フィルタープリミティブ 部分領域を識別する。x、y、width、および height 属性は、 他の フィルタープリミティブの座標および長さ 属性と同じ規則に従って定義され、したがって filter 要素上の primitiveUnits 属性によって確立される座標系の値を表す。

x、y、width、および height の既定値は、参照されるすべてのノードについて定義された部分領域の 和集合（すなわち、最もぴったり合うバウンディングボックス）である。参照されるノードがない場合 （たとえば feImage または feTurbulence）、または参照される ノードの 1 つ以上が標準入力（SourceGraphic、 SourceAlpha、BackgroundImage、BackgroundAlpha、FillPaint、または StrokePaint のいずれか）である場合、または feTile の場合（その主な機能が 参照されるノードを X と Y に複製し、それによって通常はより大きな 結果を生成するため特別である）、既定の部分領域は 0%, 0%, 100%, 100% となる。特例として、 パーセンテージは フィルター領域の寸法を基準とし、これにより既定の フィルタープリミティブ 部分領域は フィルター領域と等しくなる。

フィルタープリミティブ部分領域の幅または 高さが負またはゼロの場合、フィルタープリミティブの効果は無効になる。

フィルター領域は、 フィルタープリミティブの入力画像に対する強制的なクリップ矩形として機能する。

フィルタープリミティブ部分領域は、 フィルタープリミティブの結果に対する強制的なクリップ矩形として機能する。

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

feTile は先行するフィルタープリミティブを参照し、 その参照先フィルター プリミティブの フィルタープリミティブ部分領域に基づいてタイルをつなぎ合わせ、 自身の フィルタープリミティブ 部分領域を埋める。

<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% を指定したものを示している。そのため、 中央の緑の矩形を通して十字が見えるはずである。

• 左下の矩形は、SourceGraphic と FillPaint をマージする feMerge を示している。円には fill-opacity="0.5" が指定されているため、この場合も透明になり、中央の緑の 矩形を通して十字が見える。

• 右上の矩形は、mode="multiply" を持つ feBlend を示している。この場合の円は透明ではないため、 結果は完全に不透明となる。矩形は濃い緑になり、十字はその背後に見えないはずである。

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

このフィルターは、一般的な画像処理ソフトウェアのブレンドモードを使用して 2 つのオブジェクトをブレンドする。2 つの入力画像を ピクセル単位で組み合わせる。（[COMPOSITING-1] を参照。）

属性の定義:

mode = "<blend-mode>"

「Compositing and Blending Level 1」[COMPOSITING-1] で定義されるブレンドモードの 1 つで、入力 in がソース Cs を表し、第 2 入力 in2 が 背景 Cb を表す。このフィルタープリミティブの出力 Cm は、 Cs と Cb をブレンドした結果である。

mode の 初期値は normal である。

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

no-composite = "no-composite"

no-composite 属性が存在する場合、 指定されたブレンドモードはアルファ合成を適用してはならない。合成なしの「mixing」式については ブレンディング [COMPOSITING-1] を参照。 それ以外の場合、実装は mode で指定されたブレンドモードを Source Over 合成演算子と組み合わせなければならない。合成を伴う「mixing」式については ブレンディング [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>feBlend の例 - feBlend モードの例</title>
  <desc>グラデーションにブレンドされた 5 つのテキスト文字列。
        5 つの feBlend モードそれぞれに 1 つのテキスト文字列がある。</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)" >通常</text>
      <text x="50" y="180" filter="url(#Multiply)" >乗算</text>
      <text x="50" y="270" filter="url(#Screen)" >スクリーン</text>
      <text x="50" y="360" filter="url(#Darken)" >暗く</text>
      <text x="50" y="450" filter="url(#Lighten)" >明るく</text>
    </g>
  </g>
</svg>

feBlend の例

この例を SVG として表示

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

このフィルターは行列変換を適用する:

入力グラフィックスの各ピクセルの RGBA 色値およびアルファ値に適用し、新しい一組の RGBA 色値およびアルファ値を持つ結果を生成する。

計算は乗算されていない色値に対して実行される。

属性の定義:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

行列演算の種類を示す。キーワード matrix は、 完全な 5x4 行列の値が指定されることを示す。その他のキーワードは、完全な 行列を指定せずに一般的な色操作を実行できるようにするための便利な 短縮形を表す。

type の 初期値は matrix である。

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

values = "<number> のリスト"

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 は単一の実数 値である。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 は単一の実 数値（度）である。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)" >行列</text>
    <text x="100" y="290" filter="url(#Saturate40)" >彩度</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >色相回転</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >輝度</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 個のステップからなるステップ関数を識別するために、 n 個の値（すなわち v₀ から v_n-1）のリストが提供される。ステップ関数は 次の式によって定義される:

  値 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> のリスト）"

type="table" の場合、空白 および／またはコンマで区切られた <number> のリスト v0,v1,...vn がルックアップテーブルを定義する。 空のリストは恒等伝達関数となる。

属性が指定されていない場合、空のリストが指定されたものとして効果が適用される。

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

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 つのテキスト文字列:
        参照として機能する恒等関数、
        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">恒等</text>
    <text x="100" y="190" filter="url(#Table)" >テーブル参照</text>
    <text x="100" y="290" filter="url(#Linear)" >一次関数</text>
    <text x="100" y="390" filter="url(#Gamma)" >ガンマ関数</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] 合成操作のいずれかを使用して、画像空間内で 2 つの入力画像をピクセル単位で結合する: over、in、atop、out、xor、lighter [COMPOSITING-1]。 さらに、成分ごとの 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 = "（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 組を 4 行に並べ、
        異なる不透明度値と異なる背景消去の条件下での
        6 種類の feComposite 演算子を示す。</desc>
  <defs>
    <desc>6 種類の各合成演算子について、2 組の 6 個のフィルターを定義する。
          最初の組は、不透明な白で塗りつぶすことにより背景画像を消去する。
          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 の各次元のセル数を示す。指定される値は 0 より大きい <integer> でなければならない。整数でない値は切り捨てられ、すなわち 0 に近い側の最も近い整数値に丸められる。最初の数値 <orderX> は行列の列数を示す。2 番目の数値 <orderY> は 行列の行数を示す。<orderY> が指定されていない場合は、 <orderX> が既定値となる。

小さい値（たとえば 3）のみを使用することが推奨される。より大きな値は CPU オーバーヘッドを非常に大きくする可能性があり、通常、その性能への影響を正当化するほどの結果は 得られない。

order の 初期値は 3。

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

kernelMatrix = "<数値のリスト>"

畳み込み用のカーネル行列を構成する <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 の用途の 1 つは、.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 のピクセル値を 0 として入力画像を拡張することを示す。

edgeMode の 初期値は duplicate。

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

kernelUnitLength = "<number-optional-number>"

最初の数値は <dx> 値である。2 番目の数値は <dy> 値である。<dy> 値 が指定されていない場合、<dx> と同じ値が既定値となる。kernelMatrix 内の連続する 列および行の間の、現在のフィルター単位（すなわち、属性 primitiveUnits の値によって決定される単位）での意図された距離を、それぞれ示す。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。

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