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

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

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.