English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVGフィルタ<filter>要素は、SVG画像に美しい効果を追加するために使用されます。例えば、影、ぼかし、または高光など。
これはシンプルなSVGフィルタの例です。二つの円が表示されており、左側の円にはフィルタが適用されていません。右側の円にはガウスぼかしフィルタでレンダリングされています：
<svg width="500" height="100"> <defs> <filter id="blurFilter" y="-5" height="40" <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; " /> <ellipse cx="155" cy="60" rx="25" ry="15" style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" /> </svg>テストをしてみる‹/›
実行後の画像効果：
右の円の周囲がどのようにぼかされているかご注意ください。
SVGフィルタは、いくつかの入力（ソース）が必要であり、それにフィルタ効果を適用します。フィルタの入力は、形状のグラフィック（RGB色を表す）、形状のアルファチャンネル、または他のフィルタの出力です。
SVGフィルタは、入力からグラフィック出力（結果）を生成します。この出力は通常表示されますが、フィルタを適用した形状ではなく、フィルタの出力が使用されます。フィルタの出力は、別のフィルタの入力として使用できます。したがって、フィルタをリンクできます。
これはSVGフィルタの入出力の図示です：
| SVGフィルタは、形状のグラフィック、アルファチャンネル、または他のフィルタの出力を入力として使用できます。 |
SVGフィルタの入力は、通常inフィルタ要素の属性で指定されます。これは例です：
<feGaussianBlur stdDeviation="3in="SourceGraphic" />
SVGフィルタの出力を別のフィルタの入力として使用するには、resultフィルタ要素に属性を追加する必要があります。これは例です：
<feGaussianBlur stdDeviation="3in="SourceGraphic" result="blur"/>
今や、別のSVGフィルタは、in属性に値blurを入れることで、このフィルタの出力を使用できます。上の例では、blurはフィルタのresult属性で指定されています。
フィルタのサイズは、x、y、width、height属性で設定されます。
xとy属性は、入力として使用される形状のxとyに基づいて解釈されます。フィルタの出力が通常入力よりも大きい場合（例えば、形状の周りにぼかしを追加する場合など）があるため、xとyには負数を使用するのが一般的です。これにより、フィルタ効果が加わったグラフィックを切れません。
widthとheight属性も同様に簡単です。また、時には指定する必要がある場合があります。その幅と高さは、フィルタ効果を切り取れないように、入力形状よりも大きくなる必要があります。
あなたは
<svg width="500" height="100"> <defs> <filter id="blurFilter2" y="-10" height="40" x="-10" width="150"> <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" /> <feGaussianBlur in="offset2" stdDeviation="3" result="blur2"/> feMerge> <feMergeNode in="blur2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" /> </svg>テストをしてみる‹/›
この例では、SVGフィルタを作成し、2つのフィルタ要素：<feOffset>と<feGaussianBlur>を含めています。オフセットフィルタ効果(feOffset)は、適用された形状のアルファチャンネルに作用します。ガウスぼかし(feGaussianBlur)は、オフセットフィルタ効果の出力に作用します。
ガウスぼかしSVGフィルタはSVG形状をぼかすことができます。ガウスぼかしフィルタは、
<svg width="500" height="250"> <defs> <filter id="blurFilter4" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" /> </svg>テストをしてみる‹/›
この例では、feGaussianblurを持つfilterを定義しています。その後、CSSフィルタ属性からフィルタを参照する緑色の矩形を定義しています。以下は生成された画像です：
<feGaussianBlur要素のstdDeviation属性は、フィルタを適用する形状のぼかしの程度を決定します。数値が大きいほど、形状はよりぼやかされます。以下は、異なるstdDeumation属性の値を持つ3つの例です：
<svg width="500" height="250"> <defs> <filter id="blurFilter5" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> <filter id="blurFilter6" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" /> </filter> <filter id="blurFilter7" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="12" /> </filter> </defs> <rect x="20" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" /> <rect x="150" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" /> <rect x="300" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" /> </svg>テストをしてみる‹/›
実行後の画像効果：
矩形がどのように次第にぼやけていくかをご覧ください。フィルタに適用されるstdDeumation属性の値が高いほど、フィルタは形状をよりぼやかします。
<svg width="500" height="250"> <defs> <filter id="blurFilter8" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" /> </svg>テストをしてみる‹/›
実行後の画像効果：
注：緑色で塗りつぶされた矩形でも、フィルタの出力は黒と白です。ガウスぼかしフィルタがアルファチャンネル（RGBチャンネルではなく）に適用された場合にこの現象が発生します。
オフセットフィルタは入力を受け取り、出力で入力を移動します。つまり、形状を上下左右に移動できます。したがって、それは変換のように動作しますが、フィルタ内で完了します。以下はその例です：
<svg width="500" height="250"> <defs> <filter id="offsetFilter1" x="-20" y="-20" width="200" height="200"> <feOffset in="SourceGraphic" dx="80" dy="20" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: #000000; fill: none; filter: url(#offsetFilter1);" /> <rect x="20" y="20" width="90" height="90" style="stroke: #000000; fill: none; " /> </svg>テストをしてみる‹/›
この例では、全く同じ場所に2つの四角形を定義しました。そのうちの1つにオフセットフィルタが適用され、それが下向きおよび右向きに移動します。
実行後の画像効果。
オフセットフィルタは形状にも他の影響（ある種のぼかし）があるようですが、なぜそうなるのかはわかりません。これまでにその理由についての説明を見つけることができませんでした。
色行列フィルタを使用して形状の色に行列変換を適用することができます。これはその例です：
<svg width="500" height="250"> <defs> <filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 "/> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" /> </svg>テストをしてみる‹/›
行列の値は<feColorMatrix>要素のvalues属性で提供されます。合計で4 x 5=20個の値があります。これらの値は以下のように元の形状の色に適用されます：
0 0 0 red 0 0 0 0 green 0 0 0 0 blue 0 0 0 0 1 0
実行後の画像効果：
注意：ChromeやFirefoxで色行列フィルタの結果は少し奇妙です。上の四角形は塗り絵色で指定されていますが、色行列フィルタが作業を完了すると、輪郭のみが残されます。
複数のフィルタの入力を一つにマージする混合フィルタがあります。これはその例です：
<svg width="500" height="250"> <defs> <filter id="blurFilter3" y="-10" height="40" x="-10" width="150"> <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" /> <feGaussianBlur in="offset3" stdDeviation="3" result="blur3"/> <feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; filter: url(#blurFilter3);" /> </svg>テストをしてみる‹/›
この例では、3種類のフィルタ効果を持つフィルタです。前2つはリンクされたオフセット量とガウスぼかし効果です。第3つは
本文前面に述べた組み合わせフィルタで得られる効果と非常に似た効果が生まれます。