<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 SVG <foreignObject> inclut des éléments provenant d'un espace de noms XML différent. Dans le contexte d'un navigateur, il s'agit très probablement de (X)HTML.
Contexte d'utilisation
| Catégories | Élément graphique, Élément pouvant être rendu |
|---|---|
| Contenu autorisé | Tout élément ou caractère de donnée |
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 SVG2 x, y, width, et height sont des Proprié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.
Interface DOM
Cet élément implémente l'interface SVGForeignObjectElement.
Exemple
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
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>
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |