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 > |
chevron_right
filter_none
Output:
Supported Browsers:
- Chrome
- Edge
- Opera
- Internet explorer
- Safari
- Firefox