Index

The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.

Usage context

{{svginfo}}

Attributes

• {{SVGAttr("height")}}
  • : The height of the foreignObject. Value type: <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("width")}}
  • : The width of the foreignObject. Value type: <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("x")}}
  • : The x coordinate of the foreignObject. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
• {{SVGAttr("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.

DOM Interface

This element implements the {{domxref("SVGForeignObjectElement")}} interface.

Example

html,
body,
svg {
  height: 100%;
}

<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>

{{EmbedLiveSample('Example', 150, '100%')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}