foreignObject element | SVGForeignObjectElement object

Enables content from another XML namespace to be inserted into an Scalable Vector Graphics (SVG) namespace. Inserted content is subject to transformations and compositing parameters at the active insert point in the SVG.

Syntax

HTML


<!DOCTYPE html>
<html>
  <head>
    <title>SVG foreignObject test</title>
    <style>
      div {display:block;color:black;padding:3px;}
    </style>

  </head>
<body>
  <h1>foreignObject demo</h1>
  <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" />
      <foreignObject x="100" y="25" width="250" height="50">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <div>This is a div nestled between a circle and a rectangle drawn in SVG. </div>
        </body>
      </foreignObject>    
    <rect x="100" y="100" width="300" height="100" stroke-width="4" fill="blue" stroke="red" />
  </svg>
</body>
</html>

Members

The foreignObject object has these types of members:

Properties

Properties

The foreignObject object has these properties.

Property	Access type	Description
className		Gets the names of the classes that are assigned to this object.
externalResourcesRequired		Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
height		Gets or sets the height of an element.
id	Read/write	Standard XML attribute for assigning a unique name to an element.
ownerSVGElement		Gets the nearest ancestor svg element.
requiredExtensions		Gets a white space-delimited list of required language extensions.
requiredFeatures		Gets or sets a white space-delimited list of feature strings.
style		Gets a style object.
systemLanguage		Gets or sets a comma-separated list of language names.
transform		Gets the value of a transform attribute.
viewportElement		Gets the element that established the current viewport.
width		Defines the width of an element.
x		Gets or sets the x-coordinate value.
xmlbase		Gets or sets the `base` attribute on the element.
xmllang		Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace		Gets or sets a value that indicates whether white space is preserved in character data.
y		Gets or sets the y-coordinate value.

Standards information

Scalable Vector Graphics: Extensibility

Remarks

The foreignObject is often used to insert HTML elements for processing along with SVG code. For example, inserting a <video> tag that rotates with SVG graphics.

SVG content that is within foreignObject tags will not be rendered, unless it has been defined as an SVG document with the correct namespace attribute (xmlns=). For more info on foreignObject behavior, see Embedding foreign object types.