SVGのずらしフィルター、feOffset。

SVGのずらしフィルター。

こんにちは、「ふ」です。
SVGのフィルターシリーズ、今回は要素を「ずらす」、feOffsetについて紹介します。

feOffsetは要素を元の位置から移動させるためのフィルターで、x/y方向に個別にその距離を指定することが可能です。
さっそく、使い方を見ていきましょう。

SVGをじっくり学びたい方へ⬇︎。

SVGコーディングブック

著者：ふ

Apple Booksでみる

このたびSVGの書籍を出版しました。
しっかりとしたSVGスキルが身に付く内容となっています。参考にしてください。

使い方。

<feOffset dx = "x方向のずらし量" dy = "y方向のずらし量"/>

feOffsetのプロパティはとてもシンプルです。dxで水平方向の移動距離、dyで垂直方向の移動距離を指定します。

<svg viewBox="0 0 400 300">
    <rect x = "100" y = "100" width = "100" 
    height = "100" fill = "powderblue"/>
    <rect x = "200" y = "100" width = "100" 
    height = "100" fill = "lightpink"/>
</svg>

青とピンクの正方形を描画。現在はキレイに並んでいます。
ピンクの正方形に対して、feOffsetを施してみましょう。

<svg viewBox="0 0 400 300">
    
    <filter id = "「「５offset01」」">
    <feOffset dx = "-10" dy = "-10"/>    
    </filter>

    <rect x = "100" y = "100" width = "100" 
    height = "100" fill = "powderblue"/>
    <rect x = "200" y = "100" width = "100" 
    height = "100" fill = "lightpink"
    filter = "url(「「５#offset01」」)"
    />
    
</svg>

<filter>要素を配置。呼び出せるようにid名「offset01」としておきます。その中feOffsetを定義しました。
そしてピンク正方形のfilter属性で、先ほどのidを参照させます。

ピンク正方形をずらして表示させることができました。

ずらしの大きさはdxを「-10」、dyを「-10」としましたが、この数値は座標値のマイナス10個ぶん、を意味しています。
SVGの座標空間ではx方向が左から右へ、y方向は上から下になるにつれ、値が大きくなります。いまそれぞれの方向にマイナスの値を指定したため、x方向は左に、y方向については上にずらされた、というわけです。

元画像とずらして表示。

feOffsetとfeMergeを併用することで、単一の要素から重なった状態を描画することが可能です。

<img src = "logo.svg">

ロゴ画像を１つ、用意しました。
元画像と、offsetを取ったものを重ねて表示してさせてみます。

<svg style = "position:fixed;">
<filter id = "「「４offset02」」">
<feOffset dx = "5" dy = "5" result = "「「５offsetResult」」"/>
</filter>
</svg>   

先づはfeOffsetを定義しました。xy方向に「5」ずつ、ずらしています。この状態を呼び出せるよう、result属性で「offsetResult」という名前を付けています。

これをfeMergeフィルターを使い、元画像と重ねて描画します。
feMargeについては、⬇︎の記事で詳しく紹介しています。参考にしてください。

SVG、feMergeで フィルター効果を重ねて表示。

〽️ filter結果を合成しよう。

<svg style = "position:fixed;">
    <filter id = "「「４offset02」」">
     <feOffset dx = "5" dy = "5" result = "offsetResult"/>
     
    <feMerge>
        <feMergeNode in = "「「５offsetResult」」"/>
        <feMergeNode in = "「「１SourceGraphic」」"/>
    </feMerge>
    </filter>
</svg>   

feMergeを定義。その中に重ねたい要素をfeMergeNode要素として追加しています。
背面にはずらしの結果である「offsetResult」をin属性で呼び出しました。前面には元画像を貼りたいので、in属性には　「SourceGrafic」と指定します。

<img src = "logo.svg" style = "filter:url(「「４#offset02」」);">   

画像にfilterを適用させます。

元画像と、少しずらしたものを重ねて表示することができました。

合成ありきのフィルター。

今回はSVGのずらしフィルター、feOffsetについて紹介してきました。

ところでこの「ずらし」効果、これを「移動」と捉えると、通常はCSSなどのtransform:translateを使うことを考えるでしょう。
translateのほうが指定に使える単位が柔軟であることもあり、単なる移動であれば手軽な方法ではあります。

しかしながら「ずらし効果」と他のさまざまなフィルターを合成して要素を加工したいとき。feOffsetを使えば、<filter>要素の中ですべての処理が完結します。
上で示した「重ね表示」に関して。transfromで表現する場合には、元要素を２つ重ねて配置する必要が出てきます。一方でfeOffsetとfeMergeを併用すれば、わざわざ要素を２つ重ね合わせておく必要もありません。「１つの要素から重ね効果を生み出す」という点においては、feOffsetの利用に軍配が上がりますね。

そう考えるとfeOffsetは「他との合成を前提としたフィルター」と言えます。

最後までお読みくださり、ありがとうございました。

ではまた〜 🎵