syntax。
<filter id = "Merge1">
<feMerge>
<feMergeNode in = 「「３[resultname]」」/>
<feMergeNode in = "SourceGraphic"/>
</feMerge>
</filter>
合成出力を目指す。
こんにちは、「ふ」です。
これまでいくつかのSVGフィルターについて紹介してきましたが、今回からはいよいよ、複数のフィルターを合成する方法についてお話ししていきます。
「フィルターの合成」というと⬆︎のようにシリアル（直列）に効果をつなぎ合わせる、というものを思い浮かべるかもしれません。
これについては簡単に実現します。
<filter id = "erode_blur">
<feMorphology operator = "erode" radius = "4"/>
<feGaussianBlur stdDeviation = "3"/>
</filter>
コードはfeMorphologyとfeGaussianBlurの２つを施したもの。シリアル接続であれば、掛けたいフィルターを順に記述していけば自然に合成された結果が描画されます。
では⬆︎はどうでしょう。
元画像(B)を表示させつつ、同時にぼかし効果を掛けたもの(A)も表示させる。先ほどのシリアルな接続方法では、出力は１つしかないので実現できません。「元画像」「ぼかしたもの」の２つの出力要素を合成して描画させる必要があります。
このようなフィルターの合成出力には、feMergeという合成用のフィルターを使うことになります。また入出力のコントロールを行う際の、in属性とresult属性についての理解も必要です。
複数の効果を自在に組み合わせて出力できるという点が、SVGフィルターの真の実力ともいえます。feMergeとin、result属性の知識をものにして、高度なフィルター使いを目指しましょう。
このたびSVGの書籍を出版しました。
しっかりとしたSVGスキルが身に付く内容となっています。参考にしてください。
feMergeで出力を合成。
<feMerge>
<feMergeNode in = "...."/>
<feMergeNode in = "...."/>
....
</feMerge>
<feMerge>要素は、内部に<feMergeNode>要素として取り入れたものを重ね合わせて出力します。それぞれの<feMergeNode>要素に取り入れるソースについてはin属性で参照します。
in属性に指定する値ですが、元画像を取り入れたい場合はSourceGraphicを指定します。
フィルターを施した結果を参照したい場合には該当するフィルター要素にresult属性で名前をつけておき、feMergeNodeのin属性で呼び出します。
<body>
<img src = "sample.svg">
</body>
画像を１つ用意しました。
この画像にぼかしフィルターのfeGaussianblurを施します。
<body>
<svg style = "position:fixed;">
<filter id = 「「５"filter01"」」>
<feGaussianBlur stdDeviation = "10"/>
</filter>
</svg>
<img src = "sample.svg" style = "filter:url(「「５#filter01」」);">
</body>
フィルター結果が描画されました。
ここに、元の画像を重ねて出力させてみましょう。filterの内容を書き替えます。
<filter id = "filter01">
<feGaussianBlur stdDeviation = "10" result = "「「５blur」」"/>「「１ ..@1@」」
<feMerge>「「１ ..@2@」」
<feMergeNode in = "「「５blur」」"/>「「１ ..@3@」」
<feMergeNode in = "SourceGraphic"/>「「１ ..@4@」」
</feMerge>
</filter>
@1@ はじめにfeGaussianBlurの結果を呼び出せるように、result属性で名前をつけておきます。
@2@ feMerge要素で複数入力が可能なコンテナを生成します。そしてその中に入力したいソースを、feMergeNode要素で取り入れていきます。
@3@ １つめのNodeには、先ほどresult属性で名前を受けておいたGaussianBlurの結果を呼び出しました。
@4@ もう１つのNodeのin属性は「SourceGraphic」とし、元画像を読み込ませます。
結果です。
元画像の背後に、ぼかしたものが表示されました。
重ね順を操作する。
feMargeNode要素は、後に記述した物が前面に表示されます。
元画像とぼかしたもの、重ね順を入れ替えてみましょう。
<feMerge>
<feMergeNode in = "SourceGraphic"/>
<feMergeNode in = "blur"/>
</feMerge>
ぼかし効果が前面にきました。
霧が掛かっているようになりましたね。重ね順を変更するだけで、ずいぶんと印象が変わります。
filterの途中経過を合成。
result属性は、一連のフィルターの途中経過を取り出すこともできます。
<svg style = "position:fixed;">
<filter id = "filter02">
<feMorphology operator = "dilate" radius = "6">
<feOffset dx = "10" dy = "10"/>
</filter>
</svg>
こちらのfilterでは、feMorphologyで膨張→feOffsetで元の位置から少しずらしています。
ここから「膨張しただけの状態（途中経過）」と「膨張→ずらした状態（最終結果）」を重ね合わせてみましょう。
<filter id = "filter02">
<feMorphology operator = "dilate" radius = "6" result = 「「４"dilate"」」/>
<feOffset dx = "10" dy = "10" result = 「「５"offset"」」/>
<feMerge>
<feMergeNode in = 「「５"offset"」」/>
<feMergeNode in = 「「４"dilate"」」/>
</feMerge>
</filter>
<img src = "sample.svg" style = "filter:url(#filter02)">
「@1@元画像→@2@膨張→@3@ずらし」という一連の変化の中から、@2@と@3@の状態を取り出し、重ねることができました。
さらに。前面に元画像も重ねてみます。
<feMerge>
<feMergeNode in = "offset"/>
<feMergeNode in = "dilate"/>
<feMergeNode in = "「「１SourceGraphic」」"/>
</feMerge>
豪華な袋文字になりましたね。
組み合わせスキルを身につけよう。
最後までお読みくださり、ありがとうございました。
filterを単にシリアル接続していくのではなく、自由に組み合わせることで多彩な表現が可能になります。filterの合成を司る要素は他にもありますので、順次紹介していきますね。
ではまた〜 🎵
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。