SVG <foreignObject> Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification.
Syntax:
<foreignObject x = "The x coordinate of the foreignObject"
y = "The x coordinate of the foreignObject"
width = "The width of the foreignObject"
height = "The height of the foreignObject">
</foreignObject>
- x = The x coordinate of the foreignObject.
- y = The x coordinate of the foreignObject.
- width = The width of the foreignObject.
- height = The height of the foreignObject.
Attributes:
Example:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"></head> <body> <svg viewBox="500 500 "> <style> div { color: green; font: 18px serif; height: 100%; overflow: auto; background-color: black; } </style> <foreignObject x="100" y="25" width="160" height="160"> <div> <br><br>GEEKSFORGEEKS<br><br> </div> </foreignObject> </svg></body> </html> |
Output:
Supported Browsers:
- Chrome
- Edge
- Opera
- Internet explorer
- Safari
- Firefox
.png)
