The foreignObject element for SVG specifies inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes.
The included foreign graphical content is subject to SVG transformations, filters, clipping, masking and compositing.
Specifies the height of the element.
auto | <length-percentage> Specifies the width of the element.
auto | <length-percentage> Specifies the x-coordinate of the element.
Specifies the y-coordinate of the element.
<svg xmlns="http://www.w3.org/2000/svg">
<style>
foreignObject
{
background-image: linear-gradient(135deg, white, yellow);
width: 50%;
}
foreignObject:nth-of-type(2)
{
x: 50%;
}
</style>
<foreignObject height="100">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
<foreignObject height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<style>
foreignObject
{
background-image: linear-gradient(135deg, white, yellow);
height: 100%;
}
</style>
<foreignObject>
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<style>
foreignObject
{
background-image: linear-gradient(135deg, white, yellow);
height: 50%;
}
foreignObject:nth-of-type(2)
{
y: 50%;
}
</style>
<foreignObject width="100">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
<foreignObject width="100%">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<style>
foreignObject
{
background-image: linear-gradient(135deg, white, yellow);
height: 50%;
width: 50%;
}
foreignObject:nth-of-type(2)
{
y: 50%;
}
</style>
<foreignObject x="50">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
<foreignObject x="50%">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<style>
foreignObject
{
background-image: linear-gradient(135deg, white, yellow);
height: 50%;
width: 50%;
}
foreignObject:nth-of-type(2)
{
x: 50%;
}
</style>
<foreignObject y="50">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
<foreignObject y="50%">
<div xmlns="http://www.w3.org/1999/xhtml">XHTML in SVG</div>
</foreignObject>
</svg>