Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

foreignObject

Das foreignObject-Element ermöglicht die Einbindung eines fremden XML-Namespace, dessen graphischer Inhalt von einem anderen User-Agent dargestellt wird. Der eingebundene fremde graphische Inhalt ist Subjekt der SVG-Transformationen und des Compositing.

Der Inhalt des foreignObject wird in einem anderen Namespace vermutet. Jedes SVG-Element innerhalb eines foreignObject wird nicht gezeichnet, es sei denn, ein korrekt definiertes SVG-Subdokument mit einer sauberen xmlns-Attribut-Spezifikation ist rekursiv eingebettet. Eine Situation, in der dies geschehen kann, ist, wenn ein SVG-Dokumentenfragment in einem Nicht-SVG-Dokumentenfragment eingebettet ist, welche wiederum in einem SVG-Dokumentenfragment eingebettet ist (z.B. ein SVG-Dokumentenfragment beinhaltet ein XHTML-Dokumentenfragment, welches seinerseits ein anderes SVG-Dokumentenfragment beinhaltet).

Üblicherweise wird ein foreignObject in Verbindung mit dem <switch>-Element und dem requiredExtensions-Attribut verwendet, um eine saubere Prüfung der entsprechenden User-Agent-Unterstützung zu ermöglichen und eine alternative Rendermethode zu liefern, wenn der User-Agent nicht unterstütz wird.

Anwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Beispiel

<svg width="400px" height="300px" viewBox="0 0 400 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Dieses Beispiel benutzt das 'switch'-Element, um eine
        Ausweichmöglichkeit der graphischen Darstellung zu liefern,
        falls XHTML nicht unterstützt werden sollte.</desc>

  <!-- Das 'switch'Element wird das erste Kindelement auswählen,
       dessen Testergebnisse auf true zurückliefern. -->
  <switch>

    <!-- Verarbeite das eingebettete XHTML, falls das requiredExtensions-Attribut
         true zurückliefert (z.B. wenn der User-Agent XHTML
         in SVG eingebettet unterstützt). -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML-Inhalt steht hier -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Hier ist ein Absatz, welcher einen Zeilenumbruch benötigt.</p>
      </body>
    </foreignObject>

    <!-- Ansonsten verarbeite das folgende alternative SVG.
         Beachte, dass das 'text'-Element keine Test-Attribute besitzt.
         Wenn keine Test-Attribute angegeben werden, wird das Element so
         behandelt, als hätte es keine Test-Attribute und liefert true zurück. -->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Hier ist ein Absatz, welcher</tspan>
      <tspan x="10" y="20">einen Zeilenumbruch benötigt.</tspan>
    </text>
  </switch>
</svg>

Attribute

Globale Attribute

Spezifische Attribute

DOM-Interface

Dieses Element implementiert das SVGForeignObjectElement-Interface.

Browserkompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.9 Nicht unterstützt 2.0 3.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 2.0 Nicht unterstützt 2.0 3.0

Diese Tabelle basiert auf diesen Quellen.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, gluecksmelodie, teoli, powerswitch
 Zuletzt aktualisiert von: Sebastianz,