4. SVGの装飾表現2

2005.12.01　株式会社四次元データ　藤本将光

前章では、装飾表現のうち、ペイント、グラデーションについて説明しましたが、本章では装飾表現の中のフィルタ効果、座標系の変換について説明します。

4.1. フィルタ効果

フィルター要素を利用することによって、質感などさまざまな表現が可能になります。
前章のグラデーションの項目において説明しましたが、フィルター効果は<defs>要素内で定義し、それをsvg要素内に組み込むことによって、描画要素にフィルター効果を与えます。

フィルター要素の例を以下に示します。

• 色の調整を行う ・・・ <feComponentTransfer>(明るさ、色調、コントラストの調整）
• 模様を作成し、当てはめる ・・・ <feTurbulence>(ランダム模様）
• 照明効果を設定する ・・・ <feDiffusepghting>（散乱光による効果）と<feSpecularpghting>（反射光による効果）
• 光源を設定する ・・・ <fePointpght>（点の光源の設定）、<feSpotpght>（スポットの光源の設定）、<feDistantpght>(遠距離高原の設定)
• 2つの画像の持つ2色を混合させる場合、その混合させる法則を設定する ・・・ <feBlend>（混色モード、ある法則に従って二つの画像の色を混ぜ合わせる）
• 異なる画像を統合させる ・・・ <feMerge>（画像の統合）
• 画像をぼかす ・・・ <feGaussianBlur>(ガウスぼかし効果）
• 画像をずらす ・・・ <feOffset>

以下に、フィルター効果のサンプルを示します。
このサンプルでは、左の画像に対して、ぼかした影を入れ、その画像を右に表示させています。

<サンプルのソース>
<svg xml:space="default" width="500" height="500">
  <defs>・・・（1）
    <filter id="dropshadow">
      <feGaussianBlur in="SourceAlpha" result="bokasi" stdDeviation="1.2"/>・・・（2）
      <feOffset in="bokasi" result="kage" dx="4" dy="3"/>・・・（3）
      <feMerge>・・・（4）
	　　<feMergeNode in="kage"/>
	　　<feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect fill="red" x="10" y="10" width="100" height="40"/>
  <text fill="black" font-size="20" x="40" y="40">4DD</text>
  <g transform="translate(114)"> ・・・（5）
  <rect fill="red" x="10" y="10" width="100" height="40" filter="url(#dropshadow)"/>・・・（6）
  <text fill="black" font-size="20" x="40" y="40" filter="url(#dropshadow)">4DD</text>・・・（7）
  </g>
</svg>