HTML5 SVG 2Dはじめに10-フィルターの定義と使用

著者：Eve Cole 更新時間：2025-04-04 01:00:03

フィルターは、SVGの最も強力な機能と見なすことができます。プロのソフトウェアでのみ利用可能なフィルター効果（グラフィック要素とコンテナ要素）を追加できます。これにより、クライアント側の画像を簡単に生成および変更できます。さらに、フィルターは元のドキュメントの構造を破壊しないため、非常に維持可能です。

フィルターはフィルター要素によって定義されます。必要に応じて、フィルター効果を必要とし、関連するフィルターを参照するグラフィックまたはコンテナにフィルター属性を追加します。

フィルター要素には、多くのフィルター原子操作が含まれています。各原子操作は、着信オブジェクトで基本的なグラフィカル操作を実行し、グラフィック出力を生成します。ほとんどの原子操作は、基本的にRGBA画像を生成します。各原子動作への入力は、ソースグラフまたは他の原子動作の結果のいずれかです。したがって、フィルター効果を引用するプロセスは、ソースグラフィックスに関連するフィルター原子操作を適用し、最終的に新しいグラフィックを生成してレンダリングすることです。

コンテナ（G要素など）にフィルター属性を使用する場合、フィルター効果はコンテナ内のすべての要素に適用されます。ただし、コンテナ内の要素は画面に直接レンダリングされるのではなく、一時的に保存されます。グラフィックコマンドは、参照されるフィルター要素を処理してからレンダリングのプロセスの一部として実行されます。これは、SourceGraphicおよびSourcealphaを使用して指定されています。この効果は、以下の2番目の例で3番目のケースで実証されています。

一部のフィルター効果により、未定義のピクセルポイントが生成され、透過効果に処理されます。

例を見てみましょう：

xmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">

<title> svgフィルター効果の例</title>

<desc>さまざまなフィルター効果を使用して、グラフィックのペアの3D照明効果を実現します。 </desc>

<defs>

<フィルターID = "myfilter" filterunits = "usersspaceonuse" x = "0" y = "0">

<fespecularlighting in = "Blur" Surfacescale = "5" PecularConstant = "。75"

specularexponent = "20"照明-color = "＃bbbbbbb"

result = "specout">

</fespecularlighting>

<fecomposite in = "sourcegraphic" in2 = "specout" operator = "arithmetic"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "litpaint"/>

</femerge>

</filter>

</defs>

<gフィルター= "url（#myfilter）">

<g>

<Path fill = "none" stroke = "＃d90000" stroke-width = "10"

D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />

<パスフィル= "＃d90000"

D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 Z" />

</g>

</svg>

Firefoxで実行されているこの例の効果は、最後の画像の結果です。

注：他のブラウザにはいくつかの違いがあるかもしれません。

このフィルターは6つの効果を使用して順番に使用します（上の写真には、上の写真に示されています:)：

FegaussianBlur：このステップは、ガウスブラー処理を実行することです。この特殊効果の入力は、ソース画像の透明度値であり、出力は一時的な緩衝ぼけに保存されます。ぼやけの値は、以下のFeoffsetとFespecularlightの入力として使用されます。

Feoffset：このステップは、画像をいくつかの位置に変換することです。この効果の入力は、前のステップで生成されたぼかしであり、新しいキャッシュOffSetBlurを生成します。

fespecularlighting：このステップは、光で画像の表面を処理することです。入力は最初のステップで生成されたぼかしであり、出力は新しいキャッシュ仕様に保存されます。

2倍のフェッポジット：これらの2つのステップは、異なるキャッシュレイヤーを組み合わせています。

Femerge：このステップは、異なるレイヤーをマージすることです。このステップは通常、各キャッシュのレイヤーを融合し、最終画像を生成し、レンダリングする最終ステップです。このステップは、Fecompositeの特殊効果で複数回完了することができますが、結局のところ、それほど便利ではありません。

フィルター要素とフィルター効果領域

フィルター効果領域は、フィルター効果が機能する領域を指します。この領域のサイズは、フィルター要素の次の特性によって定義されます。

filterunits = userspaceOnuse | ObjectBoundingBox

このプロパティは、x、y、幅、高さで使用される座標空間を定義します。他のユニット関連のプロパティと同様に、このプロパティには2つの値があります：userspaceonuseとobjectboundingbox（デフォルト）。

userspaceonuseは、フィルター要素を参照する要素を使用するユーザー座標システムを表します。

ObjectBoundingBoxとは、フィルター要素を値範囲として参照する境界ボックスの割合を使用することを意味します。

x、y、幅、高さ

これらのプロパティは、フィルターが機能する長方形の領域を定義します。フィルター効果は、この領域を超えたポイントには適用されません。 x、yのデフォルト値は-10％で、幅と高さのデフォルト値は120％です。

フィルター

このプロパティは、中間キャッシュ領域のサイズを定義するため、キャッシュされた画像の品質も定義します。通常、この値は必要ありません。ブラウザは適切な値自体を選択します。一般に、フィルター効果領域は、バックグラウンドポイントに正確に対応し、ポイントを1つずつ定義する必要があります。これにより、特定の効率の利点が得られます。

これらのプロパティに加えて、フィルター要素の次のプロパティも重要です。

primitiveunits = userspaceonuse | ObjectBoundingBox

このプロパティは、各原子動作の座標と長さで使用される座標空間を定義します。このプロパティの価値は、userspaceonuseとobjectboundingboxです。ただし、デフォルト値はusersspaceonuseです。

xlink：href = <iri>

このプロパティは、現在のフィルター要素の他のフィルター要素を参照するために使用されます。

フィルター要素は、親ノードの属性のみを継承し、フィルター要素を参照する要素の属性を継承しないことに注意する価値があります。

フィルターの概要

さまざまなフィルター原子操作については詳細に説明しません。必要に応じて公式文書を確認できます。これらの操作の共通性を見てみましょう。 In属性を除き、以下の他の属性はすべての原子操作で使用できます。

x、y、幅、高さ

これらのプロパティについてはあまり言いません。フィルター原子が動作する領域を定義するため、フィルター領域になる可能性があります。これらの属性は、フィルター要素のアクション領域によって制限されます。デフォルトでは、値はそれぞれ0、0、100％、および100％です。これらの原子の作用領域は、フィルター要素の作用領域を超えていません。

結果

このステップの結果を保存します。結果を指定した後、同じフィルター要素の他の後続の操作を使用して入力として指定できます。上記の例を参照することでこれを知ることができます。この値が省略されている場合、次のステップの暗黙的な入力としてのみ使用できます。次のステップが既に入力を指定している場合、次のステップで指定されたものが優先されることに注意してください。

で

このステップの入力を示します。 In属性が省略されている場合、前のステップの結果は、このステップの入力としてデフォルトで使用されます。ステップが省略されている場合、SourceGraphicは値として使用されます（以下の説明を参照）。 In属性は、前の結果に保存された値を参照するか、次の6つの特別な値を指定できます。

SourceGraphic：この値は、現在のグラフ要素を操作として使用する入力を表します。

Sourcealpha：この値は、現在のグラフ要素のアルファ値を操作として使用する入力を表します。

BackgroundImage：この値は、操作への入力として現在のバックグラウンドスクリーンショットの使用を表します。

Backgroundalpha：この値は、現在のバックグラウンドスクリーンショットのアルファ値を使用して操作の入力を表します。

fillpaint：この値は、操作への入力として現在のグラフ要素の塗りつぶし属性の値を使用します。

strokepaint：この値は、現在のグラフィック要素のストローク属性の値を操作への入力として使用します。

これらの値の中で、BackgroundImageとBackgroundalphaを理解するのが難しい場合があります。以下のこれら2つの値を見てみましょう。

アクセスバックグラウンドスクリーンショット

通常、フィルター要素をフィルター効果のソース画像として参照する要素の背景スクリーンショットを直接使用できます。この入力を表す値はBackgroundImageとBackgroundalphaで、前の値には色とアルファ値が含まれ、後者にはアルファ値のみが含まれます。この使用法をサポートするには、フィルター要素を参照する要素上にこの機能を明示的に有効にする必要があります。

Enable-Background =蓄積| new [<x> <y> <width> <height>] |継承

このプロパティはコンテナ要素にのみ使用でき、背景スクリーンショットを撮影する方法を定義します。

新しい値は次のとおりです。コンテナの子要素がコンテナの背景スクリーンショットにアクセスできるようにし、コンテナの子要素が背景とデバイス上にレンダリングされます。

蓄積はデフォルト値であり、その効果はコンテキストに依存します。親コンテナ要素がenable-background：newを使用する場合、コンテナのすべてのグラフィック要素がバックグラウンドのレンダリングに参加します。それ以外の場合は、親コンテナが背景スクリーンショットを撮影する準備ができていないことを意味し、この要素のグラフィック要素表示はデバイスにのみ表示されます。

次の例は、これらの値の効果を示しています。

xmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">

<title>バックグラウンドスクリーンショットを使用する例</title>

<desc>次の例は、さまざまな状況での背景スクリーンショットの使用を説明しています</desc>

<defs>

<フィルターID = "ShiftBGandBlur"

filterunits = "usersspaceonuse" x = "0" y = "0">

<desc>このフィルターはソース画像を破棄しますが、背景スクリーンショットを使用します</desc>

</filter>

<フィルターID = "ShiftBGandBlur_WithSourceGraphic"

filterunits = "usersspaceonuse" x = "0" y = "0">

<desc>このフィルターの特殊効果は、現在の要素の背景スクリーンショットと写真を組み合わせています</desc>

</femerge>

</filter>

</defs>

<desc>最初の写真は、フィルターを追加しないことの効果です</desc>

</g>

</g>

<desc> 2番目の画像は、コンテナにフィルター効果を使用することです</desc>

</g>

</g>

<desc> 3番目の画像は、内部容器のフィルター効果を使用することです。2番目の画像との違いに注意してください</desc>

</g>

</g>

<desc> 4番目の写真は、グラフィック要素にフィルター効果を使用することです</desc>

<ポリゴンポイント= "160,25 160,125 240,75" fill = "blue"

filter = "url（#shiftbgandblur）"/>

</g>

</g>

<desc> 5番目の写真は、グラフィック要素に異なるフィルター効果を使用することです</desc>

<ポリゴンポイント= "160,25 160,125 240,75" fill = "blue"

filter = "url（#shiftbgandblur_withsourcegraphic）"/>

</g>

</g>

</svg>

レンダリングは次のとおりです（最初の行は最終レンダリング、2番目の行はフィルター効果です）：

この例には5つの部分が含まれています。

1.最初のグループの写真は、フィルター効果を使用しません。

2。2番目のグループは同じ画像を使用しますが、背景を使用する効果を有効にします。

3. 3番目のグループは同じ画像を使用しますが、内部容器でフィルター効果を使用します。

4. 4番目のグループは、コンテンツコンテナの要素に対するフィルター効果を使用します。

5.最後のグループは、4番目のグループと同じフィルター効果を使用し、ソース画像をマージします。

フィルターの概念は実際には非常に単純ですが、各エフェクトのコードはより複雑に見えます。実際、私たちはそれを試してから明確になります。ただし、異なるブラウザはSVGを異なる方法でサポートするため、使用する前に特定の効果を自分で試してみる必要があります。

実用的な参照

スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開発センター：https：//developer.mozilla.org/en/svg

人気リファレンス：http：//www.chinasvg.com/

公式文書：http：//www.w3.org/tr/svg11/