SVG ラインアニメーション

<defs> と <filter>

すべての SVG フィルタは <defs> 要素中で定義。<defs> 要素は、定義（definitions）の短縮形で、特殊な要素（例えばフィルタ）の定義を含みます。

<filter> 要素は、SVG フィルタを定義するために使用されます。<filter> 要素には必須の id 属性があります。それにより、グラフィックは使用するフィルタを指します。

SVG <feOffset>

例1

<feOffset> 要素は、影効果を作成するために使用されます。考え方は：まず、SVG グラフィック（画像や要素）を取得し、xy平面で少し移動します。

最初の例では、矩形をオフセットしました（ <feOffset>），それから、元の画像をオフセット画像の上にマッシュルームします（ <feBlend>）：

これは SVG コードです：

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

自分で試してみてください

コードの説明：

  • <filter> 要素の id 属性は、フィルタのユニークな名前を定義します
  • <rect> 要素の filter 属性は、その要素を「f1」フィルタにリンクします

例2

今や、画像をぼかしオフセットできます（ <feGaussianBlur>）：

これは SVG コードです：

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

自分で試してみてください

コードの説明：

  • <feGaussianBlur> 要素の stdDeviation 属性は、ぼかし量を定義します

例3

今度は、影を黒色に設定します：

これは SVG コードです：

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

自分で試してみてください

コードの説明：

  • <feOffset> 要素の in 属性が "SourceAlpha" に変更され、Alpha チャネルではなく整个 RGBA ピクセルを使用してぼかします

例4

今度は、影を一色に処理します：

これは SVG コードです：

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

自分で試してみてください

コードの説明：

  • <feColorMatrix> フィルタは、オフセット画像の色をより黒くするために使用されます。マトリックスの3つの '0.2' 値は、赤、緑、青のチャネルに乗算されます。その値を減少させると、色がより黒く近づきます（黒は0）