Looking for svg Answers? Try Ask4KnowledgeBase
Looking for svg Keywords? Try Ask4Keywords

SVGフィルタ


構文

  • フィルタ宣言: <filter id="filter-id" > ...子プリミティブのリスト... </filter>
  • SVG属性を使用してフィルタを適用する: <elementname filter="url(#filter-id)" ... />
  • CSSプロパティを使用してフィルタを適用する: (-prefix- )filter:url( "#filter-id");

パラメーター

要素の属性詳細
フィルタ領域フィルタ要素は、フィルタ効果の出力の位置、寸法、分解能、および単位を任意に定義することができる。フィルターの位置と寸法は、x、y、幅、高さのパラメーターを使用して指定できます。デフォルト値は直感的ではなく 、x:-10%y:-10%幅:120%高さ:120%
フィルタ解像度 filterRes属性はSVG 1.1のオプションの属性で、フィルタの処理の解像度を指定するために使用できます。この属性には不均一なサポートがあり、現在のブラウザでは非推奨です。
フィルターユニットデフォルトでは、フィルタ要素のフィルタ効果領域(x、y、幅、高さ)の単位と座標系は、フィルタを参照する要素の境界ボックスを基準として設定されます。 SVG用語では、これは "objectBoundingBox"と呼ばれます。 x = "50%"と書くと、 "参照元の境界ボックスの左側にあるフィルタ領域の開始位置x +要素の幅の50%"を設定することを意味します。しかし、filterUnitsプロパティを設定することによって、単位と座標を明示的に指定することもできます。 2つの選択肢は、 "objectBoundingBox"(ここで説明したデフォルト)または "userSpaceOnUse"です。 userSpaceOnUseは、フィルタリング単位と座標系を、参照元のキャンバスに設定するか、またはSVG用語で「userSpaceOnUse」に設定します。
プリミティブユニットフィルタ自体の単位システムに加えて、primitiveUnits属性を使用してフィルタの子フィルタプリミティブが使用する単位システムを指定することもできます。もう一度、userSpaceOnUseとobjectBoundingBoxの間で選択します。これらは、filterUnitsと同じ方法で、フィルタプリミティブの0,0座標と単位値に影響します。
色空間 SVGフィルタのデフォルトの色空間は、linearRGBです。オプションのcolor-interpolation-filters属性をsRGBに設定すると、色空間を従来のsRGB領域に変更できます。

備考

ほとんどのフィルタ属性は<animate>要素で<animate>できますが、IEで "fakeSMIL"ライブラリを使用して同じ結果を得る必要があります。 SMILアニメーション( <animate>要素)は、新しいWeb Animations仕様を支持して廃止されます。これは2016年中頃のサポートが非常に限られています。

Filter要素の子要素 ​​- フィルタプリミティブ - には、色補間計算が実行される色空間を指定する2つのオプションの属性があります。色補間と色補間フィルタです。前者のデフォルトはsRGBで、後者のデフォルトはlinearRGBです。 (feColorMatrixまたはfeComponentTransferを使用して)色空間を反転する操作は、CSS sRGBカラースペースに使用されている場合には直感的ではありません。たとえば、linearRGBのグレースケール画像をカラー反転すると、より白いトーンに向かって顕著にシフトします。これはプリミティブの値をsRGBに設定することで修正できます。これらの属性は、個々のフィルタプリミティブに設定することも、フィルタ要素自体から継承することもできます。

他の入力が指定されていないが、1つが必要な場合は、フィルタ内の最初のフィルタプリミティブは、入力として参照要素のラスタライズ(ビットマップ)されたバージョンを取ります。入力を期待する後続のフィルタプリミティブは、直前のフィルタプリミティブの結果を入力として取ります。

複雑なフィルタでは、暗黙のうちに入力と出力を追跡(およびデバッグ)するのが困難になることがあります。各プリミティブの入力と出力を明示的に宣言することが望ましい方法です。


SVGフィルタプリミティブは、入力、変換、照明効果、および組み合わせに大別して分類できます。

入力:

feFlood:カラーフィールドを生成する

feTurbulence:さまざまなノイズ効果を生成します。

feImage:外部画像参照、データURIまたはオブジェクト参照から画像を生成する(12月中旬の時点でオブジェクト参照はFirefoxではサポートされていない)

変換:

feColorMatrix:RBGAピクセルの入力値を出力値に変換する

feComponentTransfer:個々のカラーチャンネルのカラーカーブを調整する

feConvolveMatrix:各ピクセルを、現在のピクセルを基準とする領域のピクセル値から計算された新しいピクセルに置き換えます。

feGaussianBlur:現在のピクセルを、ピクセルの周りの領域のピクセルの加重平均で置き換えます

feDisplacementMap:別の入力グラフィックのR、G、またはB値に基づいて各ピクセルを現在の位置から移動します。

feMorphology:各ピクセルを、そのピクセルの周りの矩形領域内のすべてのピクセルの最大値または最小値から計算された新しいピクセルに置き換えます。

feOffset:入力を現在の位置から移動する

照明効果:

feSpecularLighting:「輝く」2Dまたは擬似3D照明効果を提供します

feDiffuseLighting:「マット」2Dまたは擬似3D照明効果を提供します。

feDistantLight:鏡面反射または拡散照明のための遠隔光源を提供する

feSpotLight:鏡面または拡散照明用の円錐断面光源を提供します。

fePointLight:鏡面反射または拡散照明のための点光源を提供する

組み合わせ:

feMerge:複数の入力から以前のフィルタ入力を含むシンプルなコンポジットを作成します。

feBlend:混合ルールを使用して複数の入力を混合する

feComposite:アルファ値を考慮して、設定された組み合わせルールを使用して複数の入力を組み合わせます。

feTile:入力を繰り返して繰り返しパターンを作成する


その他の注意事項

SVGはベクトルグラフィックステクノロジですが、SVGフィルタはすべての入力(SVGシェイプを含む)でピクセルレベルの操作を実行し、指定された解像度レベルでラスタライズされた(ビットマップ化された)出力を生成することを強調することが重要です。通常の画面解像度でフィルタリングされたプレーンなSVG曲線に10倍のスケール変換を適用すると、元のグラフィックのアンチエイリアスがフィルタによってピクセルに変換されてスケールアップされるため、ピクセル化されたエッジが生成されます。 (これが仕様に準拠しているのか、現在の実装に制限があるのか​​は不明です)

SVGはフィルタを書くときにXMLであることを忘れないでください。すべてのタグを閉じ、多くのプロパティと属性を明示的に指定する必要があります。そうしないと、フィルタは実行されません。

フィルタエレメントは決して直接レンダリングされません。これは、フィルタが適用される要素のfilterプロパティを使用してのみ参照されます。 displayプロパティはフィルタ要素には適用されず、displayプロパティが "none"以外の値に設定されていても、要素は直接レンダリングされません。逆に、フィルタ要素またはその祖先の表示プロパティが「none」に設定されている場合でも、参照用にフィルタ要素を使用できます。

SVGフィルタはCSSフィルタを介して参照することができますが、2016年半ばには、このメカニズムでプリミティブのサブセットのみがサポートされています。このメカニズムはMicrosoftのブラウザではサポートされていません。

フィルタ 関連する例