SVG/Elemente/eingebundene Inhalte/foreignObject

Aus SELFHTML-Wiki
< SVG‎ | Elemente‎ | eingebundene Inhalte(Weitergeleitet von ForeignObject)
Wechseln zu: Navigation, Suche

Leider ist es nicht möglich HTML-Elemente direkt in SVG einzubinden. Mit dem foreignObject-Element können Sie jedoch SVG durch andere XML-Formate, unter anderem auch XHTML, erweitern.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beachten Sie:

In SVG-Dokumenten benötigen Erweiterungen durch foreignObject immer einen eigenen Namensraum. Dieser wird durch das requiredExtensions-Attribut festgelegt.

Beispiel
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <foreignObject x="40" y="40" width="100" height="100" requiredExtensions="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml" > Inhalt </div> </foreignObject> </svg>
Empfehlung:

Validieren Sie das SVG-Dokument und den einzubindenden Inhalt getrennt, da Validatoren Dokumente mit gemischten Namensräumen nicht überprüfen können. Erst wenn alle Teile valide sind, werden sie zusammengefügt.


Beispiel ansehen …
<svg>
  <rect x="10" y="10" width="200" height="150" fill="#5a9905"/>
  <foreignobject x="20" y="10" width="180" height="150">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <h2>Überschrift</h2>
      <p>Dies ist ein Textabsatz mit einem <strong>fetten</strong> Wort und automatischem Zeilenumbruch.</p>
    </body>
  </foreignobject>
 
    <circle cx="300" cy="200" r="100" fill="#dfac20"/>
    <foreignobject x="230" y="120" width="180" height="180">
      <h2>Überschrift</h2>
      <ol>
        <li>Listenelement</li>
        <li>Listenelement</li>
        <li>Listenelement</li>
      </ol>
    </foreignobject>
  </svg>
Wie Sie sehen, hat das zweite foreignObject weder ein requiredExtensions-Attribut noch einen Namensraum.
Wenn Sie SVG in Webseiten mit HTML5-Doctype einbetten, benötigen Sie keine Namensraumdeklaration für die SVG- und die foreignObject-Elemente mehr.
Empfehlung: Verzichten Sie aufgrund der mangelnden Unterstützung durch ältere Versionen des IE und des Fehlens eines polyfills auf den Einsatz von foreignObject, um XHTML auszuführen.
Wenn Sie mehrzeiligen Text darstellen wollen, führt im Augenblick kein Weg an der Verwendung mehrerer tspan-Elemente vorbei.

switch[Bearbeiten]

Beispiel
<switch>
  <foreignObject width="100" height="50"
                 requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML Inhalt -->
      <body xmlns="http://www.w3.org/1999/xhtml">
         <h2>Überschrift</h2>
         <p>Ein Absatz</p>
      </body>
  </foreignObject>

  <!-- alternatives SVG  -->
  <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Überschrift</tspan>
      <tspan x="10" y="20">Ein Absatz</tspan>
  </text>
</switch>
Das Beispiel stellt das eingebettete XHTML dar, wenn das requiredExtensions-Attribut als true erkannt wird

(d.h., Der Broswer unterstützt in SVG eingebettetes XHTML).

Falls nicht, wird alternativ der Text mithilfe zweier tspan-Elemente dargestellt.


Weblinks[Bearbeiten]

Referenz[Bearbeiten]