10
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

SVGのフィルタ

SVGのフィルタ処理

SVGではフィルタといって、描画したものにぼかし等のエフェクトをかける処理を行うことができます。

filter要素

filterは要素で定義することができます。
filter要素の中で各種要素でfilterを定義します。
下記ではfeGaussianBlurを使用します。
Gaussian Blurはガウス分布の式を使ったぼかしです。詳細は下記のリンク先で確認してください。
http://en.wikipedia.org/wiki/Gaussian_blur

filter.svg
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5,10" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" stroke="blue" stroke-wdith="5" filter="url(#gaussian)" />
</svg>

sddDeviationはガウス分布の式のx,yの値を表しています。
in属性はフィルタの入力の種類を表し、SourceGraphicはフィルタが適用されるグラフィックスを用いられます。
結果は下記のようになります。

svg_filter1.png

feMerge

フィルタを複数レイヤ用意して重ね合わせたいときはfeMerge要素を使います。
feMerge要素は子要素にfeMergeNodeを持ち、それを重ね合わせます。
下記はfeGaussianBlurとfeOffset(dxとdyだけずらすフィルタ)を用意して、重ね合わせてみます。

filter2.svg
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
      <feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="offset" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>

フィルタを書けた結果はresultで名前をつけられるので、そのresultの値をfeMergeNodeのinにして重ね合わせています。
結果は下記のようになります。

svg_filter2.png

様々なフィルタ

フィルタには他にもたくさんの要素があります。
また、 feDiffuseLightingや feSpecularLightingには光源を設定でき、光源を設定する要素にfeDistantLight, fePointLight, feSpotLight があります。

こちらはまた別の機会に説明しようと思ってます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
10
Help us understand the problem. What are the problem?