The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
<foreignObject>
Example
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
imperdiet eros. Aliquam erat volutpat.
</div>
</foreignObject>
</svg>
Attributes
-
height -
The height of the foreignObject. Value type: <length>|<percentage> ; Default value:
auto; Animatable: yes -
width -
The width of the foreignObject. Value type: <length>|<percentage> ; Default value:
auto; Animatable: yes -
x -
The x coordinate of the foreignObject. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
y -
The y coordinate of the foreignObject. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes
Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
Global attributes
- Core Attributes
- Styling Attributes
class,style- Conditional Processing Attributes
-
Most notably:
requiredExtensions,systemLanguage - Event Attributes
-
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
- Presentation Attributes
-
Most notably:
clip-path,clip-rule,color,color-interpolation,color-rendering,cursor,display,fill,fill-opacity,fill-rule,filter,mask,opacity,pointer-events,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,transform,vector-effect,visibility - Aria Attributes
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
Usage notes
| Categories | None |
|---|---|
| Permitted content | Any elements or character data |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
foreignObject |
1 | ≤79 | 2 | No | 2 | 3 | 4 | 18 | 4 | 10.1 | 3 | 1.0 |
height |
1 | ≤79 | 2 | No | 2 | 3 | 4 | 18 | 4 | 10.1 | 3 | 1.0 |
width |
1 | ≤79 | 2 | No | 2 | 3 | 4 | 18 | 4 | 10.1 | 3 | 1.0 |
x |
1 | ≤79 | 2 | No | 2 | 3 | 4 | 18 | 4 | 10.1 | 3 | 1.0 |
y |
1 | ≤79 | 2 | No | 2 | 3 | 4 | 18 | 4 | 10.1 | 3 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject