Skip to main content
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.

Scalable Vector Graphics: Extensibility

 

Syntax


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

The foreignObject object has these properties.

PropertyAccess typeDescription

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

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.