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> (en-US)-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! (en-US)

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.