<filter>

SVGのフィルター操作は複数の入力から結果を生成します。生成された結果は、次のフィルター処理の入力として使うこともできます。

入力となるグラフィックスには、SVGのグラフィックス要素と操作によって生成された結果のほかに、 SourceGraphic(ソースグラフィックス)やBackgroundImage(背景イメージ)など次の表に示すものを指定することができます。

SVGのフィルター入力を次の表に示します。

SVGのフィルターの入力
名前 意味
SourceGraphic ソースグラフィック
SourceAlpha ソースの透明度(アルファ値)
BackgroundImage 背景イメージ
BackgroundAlpha 背景の透明度(アルファ値)
FillPaint 塗り潰し色
StrokePaint ストロークの色

SVGのフィルター処理に使う要素を次の表に示します。

SVGのフィルター処理に使う要素
要素 解説
<feBlend> グラフィックスを合成(混合)する
<feColorMatrix > カラーマトリックス
<feComponentTransfer> 色成分を転送する(<feFuncX>のためのコンテナ)
<feComposite> グラフィックスを合成する
<feConvolveMatrix> コンボリューション(畳み込み)マトリックス
<feDiffuseLightning> 拡散照明
<feDisplacementMap> 変位マップ
<feDistantLight> 光源
<feFlood> 塗り潰し
<feGaussianBlur> グラフィックスをぼかす。
<feFuncX> 転送する成分(<feFuncR>、<feFuncG>、<feFuncB>、<feFuncA>がある)
<feImage> イメージ
<feMerge> <feMergeNode>のためのコンテナ要素
<feMergeNode> 合成するノード
<feMorpgology> モフォロジー
<feOffset> グラフィックスを指定されただけずらす
<fePointLight> 点光源
<feSpecularLighting> 照明の計算における鏡面反射成分の画像を生成する
<feSpotLight> スポットライト
<feTile> 入力画像の矩形をタイル状に繰り返し敷き詰める
<feTurbulence> Perlin の乱れ関数( Perlin turbulence )を適用した画像を生成する

フィルターの各要素には共通して次の属性があります。

フィルターの要素の主な属性
id フィルターのID
x、y フィルターを適用するキャンバスの左上の座標
width フィルターを適用するキャンバスの幅
height フィルターを適用するキャンバスの高さ
in グラフィックス入力
filterUnits フィルター領域の単位
primitiveUnits フィルタープリミティブの単位
result フィルター処理をした結果の名前

次の例は文字列をぼかして表示するコードの例です。上には比較のためにぼかしていない文字列を表示しています。


    <svg width="600" height="140" style="font-size:36px; stroke:black; stroke-width:1px; fill:black">
      <defs>
        <!-- フィルターの定義 -->
        <filter id="blur">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
        </filter>
      </defs>
      <!-- ぼかしてないテキスト -->
      <text x="10" y="50">素晴らしいぞSVG!</text>
      <!-- ぼかしたテキスト -->
      <text x="10" y="100" filter="url(#blur)">こんにちはSVG!</text>
    </svg>
    

次のように表示されます。

素晴らしいぞSVG! こんにちはSVG!

関連項目

feGaussianBlur


SVG目次 inserted by FC2 system