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.

<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égoriesAucune
Contenu autoriséTout élément ou caractère de donnée

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<foreignObject>' dans cette spécification.
Candidat au statut de recommandation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<foreignObject>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge ? Firefox Support complet 2IE Aucun support NonOpera Support complet 2Safari Support complet 3WebView Android ? Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 2Safari iOS Support complet 3Samsung Internet Android ?
heightChrome Support complet 1Edge ? Firefox Support complet 2IE Aucun support NonOpera Support complet 2Safari Support complet 3WebView Android ? Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 2Safari iOS Support complet 3Samsung Internet Android ?
widthChrome Support complet 1Edge ? Firefox Support complet 2IE Aucun support NonOpera Support complet 2Safari Support complet 3WebView Android ? Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 2Safari iOS Support complet 3Samsung Internet Android ?
xChrome Support complet 1Edge ? Firefox Support complet 2IE Aucun support NonOpera Support complet 2Safari Support complet 3WebView Android ? Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 2Safari iOS Support complet 3Samsung Internet Android ?
yChrome Support complet 1Edge ? Firefox Support complet 2IE Aucun support NonOpera Support complet 2Safari Support complet 3WebView Android ? Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 2Safari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, Sebastianz, SphinxKnight, marie-ototoi, J.DMB, Goofy, akira86
Dernière mise à jour par : a-mt,