feTile (SVG Filter Effect)

By mbystedt on Mar 1, 2014, 7:43:46 AM

The tile filter effect is used to tile the filter effect area with a source picked with the in attribute. Typically, the tile source has a width and height that is smaller than the width and height on the tile filter effect. In the example, the cat image is scaled to accomplish this.

The named filter result to tile. See: Filter Effect Common Attributes
<filter id="tileImages" x="0" y="0" width="100%" height="100%">
  <feImage result="imgSource" xlink:href="cat.jpg" width="20%" height="25%" preserveAspectRatio="xMidYMid slice"  />
  <feTile in="imgSource" />
<filter id="tileSelf" x="20" y="20" width="600" height="160" filterUnits="userSpaceOnUse">
  <feOffset in="SourceGraphic" x="20" y="20" width="100" height="30" />
  <feTile /><!-- By default, in is the previous result. -->
<rect x="20" y="20" width="600" height="160" filter="url(#tileImages)" />
<circle cx="70" cy="80" r="50" fill="white" fill-opacity=".5" filter="url(#tileSelf)" />
Example 1. A tiled image of a cat from Nelson, BC. (Download)

The example shows the tiling of the partial image of a circle. This is done by setting the bounding box of the filter to be same as the rectangle. Normally, a filter would use the bounding box centred on the graphic itself which would give no tiling with 'SourceGraphic' and 'SourceAlpha'. The filter effect, feOffset, is used to pick just the top of the circle. The circle and this crop is shown when you hover over the example.

Related Topics