SVG <feImage> Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output.
Syntax:
<feImage x="" y="" width="" height="" externalResourcesRequired ="" preserveAspectRatio="" xlink:href=""/>
Attributes:
- x: It defines the x-axis coordinate in the user coordinate system.
- y: It defines the y-axis coordinate in the user coordinate system.
- width: The width of the foreignObject.
- height: The height of the foreignObject.
- externalResourcesRequired: It indicates whether the external resources are required in the current document. Default value is false.
- preserveAspectRatio: It indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
- xlink:href: It defines a reference to a resource as a reference IRI.
- crossorigin: It tells the request of the browser for an image file with cross-origin permissions.
Example 1:
HTML
<!DOCTYPE html><html> <body> <svg width="250" height="250"> <defs> <filter id="id_1"> <feImage xlink:href=uploads/20201106171852/Untitled189-2.png" /> </filter> </defs> <g> <rect x="1" y="1" width="300" height="200" fill="green" stroke="green" /> <rect x="50" y="25" width="150" height="150" filter="url(#id_1)" /> </g> </svg></body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html><html> <body> <svg width="250" height="250"> <rect id="Img" width="100%" height="80%" stroke="black" fill="gold" /> <filter id="id_2" primitiveUnits="objectBoundingBox"> <feImage xlink:href="#Img" x="25%" y="30%" width="50%" height="50%" result="waves" /> <feComposite operator="atop" in="waves" in2="SourceAlpha" /> </filter> <g> <rect x="1" y="1" width="300" height="200" fill="red" stroke="blue" /> <rect x="50" y="25" width="150" height="150" filter="url(#id_2)" /> </g> </svg></body> </html> |
Output:
Example 3:
HTML
<!DOCTYPE html><html> <body> <svg width="500" height="500"> <filter id="id_3" primitiveUnits="objectBoundingBox"> <feImage xlink:href=uploads/20201106171852/Untitled189-2.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xAlignYAlign" result="waves" /> <feComposite operator="atop" in="waves" in2="SourceImage" /> </filter> <g> <ellipse cx="200" cy="150" rx="180" ry="100" fill="gold" stroke="#ff0000" /> <ellipse cx="200" cy="150" rx="75" ry="75" fill="black" filter="url(#id_3)" /> </g> </svg></body> </html> |
Output:
Please Login to comment...