SVG <foreignObject> Element
Last Updated :
31 Mar, 2022
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>
Attributes:
- 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.
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...