The <feTile>
SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>
.
The <feTile>
SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>
.
This element implements the SVGFETileElement
interface.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Tiling an MDN logo with the Mozilla mascot's head that is on the logo </title> <defs> <!-- Define the region of the filter to be the bounding box of the MDN logo being filtered. These parameters will create an output that covers the same region as the image. --> <filter id="tile" x="0" y="0" width="100%" height="100%"> <!-- Create a tile from the central portion of the image from (50,50) to (150,150). This area is essentially the Mozilla mascot's head. --> <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" /> <!-- Without specifying a region, feTile defaults to the region of the filter. Without specifying an "in" parameter, the default is the result of the previous primitive. So this second feTile will tile the entire filter region with the mascot's head. --> <feTile /> </filter> </defs> <!-- Use the MDN logo as input to the filter --> <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);" /> </svg>
Specification |
---|
Filter Effects Module Level 1 # feTileElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
feTile |
Yes | 12 | 4 | Yes | 9 | No | Yes | Yes | Yes | No | No | Yes |
in |
Yes | 12 | 4 | Yes | 9 | No | Yes | Yes | Yes | No | No | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTile