L'élément foreignObject permet l'inclusion d'un espace de noms (namespace) XML étranger dont le contenu graphique est rendu par un agent utilisateur différent. Le contenu graphique étranger inclus est sujet à des modifications et incrustations en SVG.
Les contenus des foreignObject sont présumés venir d'un namespace différent. Les éléments SVG à l'intérieur d'un foreignObject ne seront pas rendus, excepté dans le cas où un sous-document SVG est correctement défini avec un attribut xmlns et inclus récursivement. L'une des situations dans laquelle cela peut apparaitre est lorsqu'une partie de document SVG est incluse à l'intérieur d'une autre partie de document non-SVG qui à son tour est inclus dans une partie de document SVG (ex : une partie de document SVG contenant une partie de document XHTML qui, lui-même, contient déjà une autre partie de document SVG).
Habituellement, un foreignObject sera utilisé en conjonction avec l'élément <switch> et l'attribut requiredExtensions pour fournir un contrôle correctement supporté par l'agent utilisateur et fournir un rendu alternatif au cas où la prise en charge par l'agent utilisateur ne soit pas disponible.
Contexte d'utilisation
| Catégories | Aucune |
|---|---|
| Contenu autorisé | Tout élément ou caractère de donnée |
Exemple
<svg width="400px" height="300px" viewBox="0 0 400 300"
xmlns="https://www.w3.org/2000/svg">
<desc>This example uses the 'switch' element to provide a
fallback graphical representation of a paragraph, if
XHTML is not supported.</desc>
<!-- The 'switch' element will process the first child element
whose testing attributes evaluate to true.-->
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., the user agent supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="https://www.w3.org/1999/xhtml">
<!-- XHTML content goes here -->
<body xmlns="https://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
If no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Voici un paragraphe qui</tspan>
<tspan x="10" y="20">n'a pas besoin de word wrap.</tspan>
</text>
</switch>
</svg>
Attributs
Attributs globaux
- Attributs de traitement conditionnel »
- Attributs de base »
- Attributs d'évènement graphique »
- Attributs de présentation »
classstyleexternalResourcesRequiredtransform
Attributs particuliers
DOM Interface
Cet élément implémente l'interface SVGForeignObjectElement.
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support basique | 1.0 | 1.9 | Pas de support | 2.0 | 3.0 |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support basique | ? | 18.0 | 2.0 | Pas de support | 2.0 | 3.0 |
Ce tableau est basé sur les sources suivantes.