<foreignObject>

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'élément<foreignObject> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur duSVG. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML.

Exemple

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">  <style>    polygon {      fill: black;    }    div {      color: white;      font: 18px serif;      height: 100%;      overflow: auto;    }  </style>  <polygon points="5,5 195,10 185,185 10,195" />  <!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG -->  <foreignObject x="20" y="20" width="160" height="160">    <!--      Dans le cas d'un SVG intégré dans du HTML, le namespace XHTML peut      être omis, mais il est obligatoire dans le contexte d'un document SVG    -->    <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>

Attributs

height: Cet attribut détermine la hauteur du rectangle.Type de valeur:<length>|<percentage> ;Valeur par défaut:auto;Animation:oui
width: Cet attribut détermine la largeur du rectangle.Type de valeur:<length>|<percentage> ;Valeur par défaut:auto;Animation:oui
x: Cet attribut détermine la coordonnée x du rectangle.Type de valeur:<length>|<percentage> ;Valeur par défaut:0;Animation:oui
y: Cet attribut détermine la coordonnée y du rectangle.Type de valeur:<length>|<percentage> ;Valeur par défaut:0;Animation:oui

Note :À partir de SVG2x,y,width, etheight sont desPropriétés Géometriques, ce qui signifie que ces attributs peuvent également être utilisés comme des propriétés CSS pour cet élément.