<foreignObject>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <foreignObject> SVG-Element umfasst Elemente aus einem anderen XML-Namespace. Im Kontext eines Browsers ist es höchstwahrscheinlich (X)HTML.

Beispiel

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>

Attribute

height

Die Höhe des foreignObject. Wertetyp: <length>|<percentage> ; Standardwert: auto; Animierbar: ja

width

Die Breite des foreignObject. Wertetyp: <length>|<percentage> ; Standardwert: auto; Animierbar: ja

x

Die x-Koordinate des foreignObject. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

y

Die y-Koordinate des foreignObject. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

Hinweis: Ab SVG2 sind x, y, width und height Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.

Verwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# ForeignObjectElement

Browser-Kompatibilität

BCD tables only load in the browser