<feTile>
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
<feTile> は SVG フィルタープリミティブで、使用すると、入力画像のパターンを繰り返しタイル状に配置して、対象の矩形を塗りつぶすことができます。この効果は、<pattern> の効果と似ています。
使用コンテキスト
属性
DOM インターフェイス
この要素は SVGFETileElement インターフェイスを実装しています。
例
SVG
html
<svg
width="200"
height="200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>
ロゴの Mozilla マスコットの頭部を用いて、MDN ロゴをタイリングする
</title>
<defs>
<!-- フィルターの対象領域を、フィルター処理の対象となる MDN ロゴの
囲みボックスとして定義します。これらの引数を設定すると、画像と
同じ領域を埋め尽くす出力が生成されます。 -->
<filter id="tile" x="0" y="0" width="100%" height="100%">
<!-- 画像の中央部分、(50,50) から (150,150) までの範囲にタイルを
作成します。この領域は、基本的に Mozilla のマスコットの頭部に
あたります。 -->
<feTile in="SourceGraphic" x="50" y="50" width="100" height="100" />
<!-- 領域を指定しない場合、feTile はデフォルトでフィルターの領域を
使用します。"in" 引数を指定しない場合、デフォルトは前回の結果と
なります。したがって、この 2 つ目の feTile は、フィルター領域
全体をマスコットの頭でタイル状に埋め尽くします。 -->
<feTile />
</filter>
</defs>
<!-- MDN のロゴをフィルターの入力として使用 -->
<image
href="mdn_logo_only_color.png"
x="10%"
y="10%"
width="80%"
height="80%"
filter="url(#tile)" />
</svg>
結果
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1 # feTileElement |