The <foreignObject>
SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
The <foreignObject>
SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
<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>
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.
class
, style
Most notably: requiredExtensions
, systemLanguage
Global event attributes, Graphical event attributes, Document event attributes, Document element event 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-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
Categories | None |
---|---|
Permitted content | Any elements or character data |
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |
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