フーノページ



SVGfilterのMerge

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










syntax。

<filter id = "「「5offset01」」">
    <feOffset dx = "n" dy = "n"/>
</filter>
「「3//HTML」」
<「「2element」」 filter = "url(「「5#offset01」」)"/>

「「3//CSS」」
「「2element」」 {
    filter:url(「「5#filter01」」);
    }


SVGのずらしフィルター。


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


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



このたび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 = "「「5offset01」」">
    <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(「「5#offset01」」)"
    />
    
</svg>

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


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

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




元画像とずらして表示。


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

<img src = "logo.svg">


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

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

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

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

feMerge

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

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



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

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

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

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



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




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


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

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

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

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

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

ではまた〜 🎵




「ふ」です。

ふ

ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。