feTile element | SVGFETileElement object

Fills a target rectangle with tiled copies of an input image.

Scalable Vector Graphics: Filter Effects, Section 15.25.26

Syntax


<filter id="tile1">
    <feImage x="0" y="0" width="10px" height="10px" result="raster1" xlink:href="../images/background.png"/>
    <feTile/>
</filter>

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGFETileElement

Members

The SVGFETileElement object has these types of members:

Properties

Properties

The SVGFETileElement object has these properties.

Property	Access type	Description
height		Gets or sets the height of an element.
in1	Read-only	Identifies input for the given filter primitive.
result	Read-only	Provides a reference for the output result of a filter.
width		Defines the width of an element.
x		Gets or sets the x-coordinate value.
y		Gets or sets the y-coordinate value.

Standards information

Scalable Vector Graphics: Filter Effects, Section 15.25.26

Examples

Creates multiple tiles of the saucer.svg graphic.

HTML


<!DOCTYPE HTML>
<html>
  <head>
  </head>
  
  <body>
    <svg width="400" height="400">
      <defs>
        <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage x="0" y="0" width="100" height="100" xlink:href='saucer.svg' result='pict1'/>
          <feTile x="0" y="0" width="400" height="400" in="pict1"/>
        </filter>
      </defs>
      <use filter="url(#MyFilter)" x='0' y='0'/>				
    </svg>
  </body>
</html>