<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 du SVG. 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 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.

Attributs globaux

Attributs de base: Notamment: id, tabindex
Attributs de style: class, style
Attributs de traitement conditionnel: Notamment: requiredExtensions, systemLanguage
Attributs d'événement: Attributs d'événements globaux, Attributs d'événement graphiques, Attributs d'événement du document, Attributs d'événement des éléments du document
Attributs de présentation: Notamment: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Attributs Aria: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Notes d'usage

Catégories	Élément graphique, Élément pouvant être rendu
Contenu autorisé	Tout élément ou caractère de donnée

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # ForeignObjectElement

Compatibilité des navigateurs

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content