web-dev-qa-db-fra.com

Puis-je incorporer du HTML dans un fragment SVG HTML5?

HTML5 prend en charge la balise <svg>, Permettant d'incorporer SVG dans HTML.

En creusant un peu plus, puis-je imbriquer du HTML dans mon fragment <svg>? Par exemple, j'aimerais mettre un <table> CSS dans certaines parties de mes graphiques SVG.

J'ai fait un petit test et Chrome12 n'a pas aimé le HTML <p> À l'intérieur du <svg>. Existe-t-il une technique pour le faire fonctionner (comme peut-être une balise conteneur html?)?

48
Serge Wautier

Oui, avec le <foreignObject> élément, voir cette question pour quelques exemples.

Alternativement, si vous avez un document html5, vous pouvez également utiliser le positionnement CSS et le z-index pour rendre les parties html visibles où vous souhaitez les disposer au-dessus du svg. Si vous le faites comme ça, vous n'avez pas besoin d'imbriquer le code HTML à l'intérieur du fragment svg. Cela vous donnera le comportement le plus cohérent entre les navigateurs de mon expérience.

40
Erik Dahlström

Les objets étrangers ne sont pas pris en charge sur Internet Explorer. Veuillez vérifier ForeignObject

5
atluriajith