Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@sassy_watson

SVGのフィルタ

More than 5 years have passed since last update.

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 があります。

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

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sassy_watson
Androidアプリやフロントエンドのエンジニア。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?