The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.
Syntax:
<feTile in="" x="" y="" width="" height="" />
Attributes:
- in: The in attribute identifies input for the given filter primitive.
- x: It defines x-axis coordinate in the user coordinate system.
- y: It defines y-axis coordinate in the user coordinate system
- width: The width of the foreignObject.
- height: The height of the foreignObject.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< filter id = "feOffset" x = "-40" y = "-20"
width = "100" height = "200" >
< feOffset in = "SourceGraphic" dx = "60" dy = "60" />
< feGaussianBlur stdDeviation = "5" result = "blur2" />
< feTile in = "SourceGraphic" x = "50"
y = "50" width = "100" height = "100" />
< feTile />
</ filter >
< rect x = "1" y = "1" width = "198" height = "118"
fill = "green" stroke = "blue" />
< circle cx = "100" cy = "60" r = "55" stroke = "black"
stroke-width = "3" fill = "white" />
< g fill = "#FFFFFF" stroke = "Green" font-size = "10"
font-family = "Verdana" >
< text x = "60" y = "62" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "tile" x = "0" y = "0"
width = "100%" height = "100%" >
< feTile in = "BackgroundImage" x = "50"
y = "50" width = "100" height = "100" />
< feTile />
</ filter >
</ defs >
< image xlink:href =
"C:/Users/pc/Desktop/gfg/capture42.png"
x = "10%" y = "10%" width = "80%" height = "80%"
style = "filter:url(#tile);" />
</ svg >
</ body >
</ html >
|
Output :
Example 3:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "tile" x = "0" y = "0"
width = "100%" height = "100%" >
< feTile in = "FillPaint" x = "100"
y = "100" width = "120" height = "120" />
< feTile />
</ filter >
</ defs >
< image xlink:href =
"C:/Users/pc/Desktop/gfg/capture25.png"
x = "10%" y = "10%" width = "80%" height = "80%"
style = "filter:url(#tile);" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...