syntax。
<filter id = " ">
<feImage href = "画像のURL"
width = " " height = " " result = "「「４result1」」"/>
<feTile in = "「「４result1」」" result = "「「５result2」」"/>
<feComposite in = "「「５result2」」" in2 = "SourceGraphic"
operator = "in"/>
</filter>
オブジェクトの形状に敷き詰めるまで。
こんにちは、「ふ」です。
SVGのフィルターシリーズ、今回は画像をタイル状に敷き詰める<feTile>について紹介します。
当フィルターシリーズも、だんだんトリッキーなものを扱うようになってきました(笑)
なお<feTile>を使っただけでは、オブジェクトのバウンディングボックスいっぱいに画像が敷き詰められてしまいます(⬆︎Ⓑの状態)。そのため元のオブジェクトの形状Ⓐは認識できない状態です。
当記事ではⒸのように、元オブジェクトの形を保ったまま、そこに画像をタイル状にならべる、というものを目指します。
次の手順ですすめていきましょう。
@1@ 元オブジェクトとタイルにする画像を準備
@2@ <feImage>でタイル用画像をフィルターコンテナ内で扱えるようにする
@3@ 読み込んだタイル用画像を<feTile>で並べる
@4@ <feComposite>で元オブジェクトの形に切り抜き
このたびSVGの書籍を出版しました。
しっかりとしたSVGスキルが身に付く内容となっています。参考にしてください。
@1@ 要素を準備。
<svg viewBox="0 0 841.89 595.28">
<g>
「「３<-- 「ふ」の文字 -->」」
<path d="M351.79,357.98c-32.79,27.74-59.27,70.2-66.84,84.91L224,413.05c2.52-4.62,31.95-62.22,81.13-102.99L351.79,357.98z
M344.23,474v-67.26c29.43,0,43.72-3.78,52.13-9.25c43.3-28.58-13.87-100.89-41.62-129.47l77.35-67.26
c-39.52-26.06-84.08-7.57-121.49,17.24l-37.83-55.07c50.44-35.31,98.37-47.5,143.77-39.09c42.04,7.15,71.04,33.21,99.63,66.84
l-79.03,68.52c39.52,51.71,52.55,102.15,34.89,146.29C447.22,467.27,387.95,474,344.23,474z M519.1,451.3L503.13,408l32.79-11.77
c-9.25-18.5-23.96-40.78-48.76-63.9l47.92-46.24c64.32,60.12,81.55,125.69,82.81,130.32L519.1,451.3z"/>
</g>
</svg>
元となるオブジェクト「ふ」の形と、
タイル用の外部画像「fu.svg」を用意しました。
<svg viewBox="0 0 841.89 595.28">
<filter id = "「「５tile」」">
</filter>
<g filter = "url(「「５#tile」」)">
<path d="「「３ 〜長いので略〜 」」"/>
</g>
</svg>
<filter>要素でフィルターコンテナを用意し、元オブジェクト（「ふ」の文字）のfilter属性で参照させておきます。
ここから@2@〜@4@の手順をすすめていきましょう。
@2@ <feImage>で画像取り込み。
それではフィルターコンテナの中身を書いていきましょう。
はじめに<feImage>で画像を読み込みます。
<filter id = "tile">
<feImage href = "「「５fu.svg」」"
width = "60" height = "60" result = "「「５fu」」"/>
</filter>
<feImage>のhref属性で画像URLを参照します。つぎのフィルターに結果を渡すため、result属性で「fu」という名前をつけておきました。
またwidthとheightを指定していますが、ここは取り込む画像の縦横比と同じにしておきましょう。<feImage>ではpreserveAspectRatio属性が働くため、描画領域と画像の縦横比が違うばあい、隙間ができたりしてしまいます。
現在の状態です。
小さい領域に画像が読み込まれました。<feImage>の結果だけが出力されるため、元オブジェクトは非表示になっています。
<feImage>とpreserveAspectRatio属性については、⬇︎の記事でくわしく解説しています。
SVGのfeImageフィルター。
〽️ 外部画像をフィルターで合成。
SVGに画像をぴったりと配置〜
preserveAspectRatio。
〽️ 縦横比が違っても安心。
@3@ <feTile>で並べる。
<feTile in = " "/>
<feTile>独自の属性は「in」のみです。ここにタイル状に並べたいソースを指定します。
取り込んだ画像を<feTile>で並べてみましょう。
<filter id = "tile">
<feImage href = "fu.svg" width = "60"
height = "60" result = "「「５fu」」"/>
<feTile in = "「「５fu」」"/>
</filter>
<feTile>のin属性に、先ほど<feImage>で処理した 結果(result)を渡します。
画像が敷き詰められました。
@4@ <feComposite>で切り抜き。
さいごに<feComopsite>をつかって、タイル状にならんだ画像を元オブジェクトの形に切り抜いていきましょう。
<feComposite>の「operator : in」は、２つのソースが重なっている部分のみを表示させます。
２つのソースは「in」「in2」属性で呼び出すのですが、「in」で読み込まれたソースの部分が最終的に表示されます。
<filter id = "tile">
<feImage href = "fu.svg" width = "60"
height = "60" result = "fu"/>
<feTile in = "fu" result = "「「５futile」」"/>
<feComposite in = "「「５futile」」" in2 = "「「１SourceGraphic」」"
operator = "「「１in」」"/>
</filter>
<feTile>の結果を<feComposite>に渡すため、result属性で「futile」という名前をつけました。
<feComposite>のin属性には前面に出したい「futile」、in2属性には元オブジェクト「SourceGraphic」を指定。operator属性を「in」とし、重なり合った部分だけを表示させます。
完成です。
元オブジェクトの形状の中に、タイル画像を敷き詰めることができました。
SVG、feCompositeで要素を切り抜き。
〽️ SVGでパスファインダー的な。
組み合わせがたのしい。
最後までお読みくださり、 ありがとうございました。
今回は画像を敷き詰める<feTile>に２つのフィルター、<feImage>と<feComposite>を組み合わせたサンプルを紹介してきました。１つではなく複数のSVGフィルターをつなぎ合わせれば、表現の幅がグンと広がります。組み合わせを考える作業もなかなか楽しいものです 🎶
今後もフィルターの使い方とともに、面白い組み合わせが見つかったら紹介していきますね。
ではまた〜 🎵
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。