HTML en SVG en HTML

J'ai un simple fichier SVG, qui voit bien dans Firefox - son certains texte enveloppé dans une boîte à l'aide d'un foreignObject d'inclure du code HTML - le texte est enveloppé dans la div:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>

Mais aucun montant de firkling pouvez faire ce travail comme un <svg> élément à l'intérieur d'un document HTML. La div finit toujours par être juste coulé avec d'autres divs dans le document.

Soit c'est fondamentalement pas possible ou que je fais une erreur avec les espaces de noms ou de quelque chose. Mais quelqu'un peut envelopper le au-dessus de SVG dans un document HTML, et d'afficher le texte dans une boîte de la largeur x hauteur à la position donnée (par rapport à la SVG ou de son contenant, bien sûr)?

Je n'ai pas vu un exemple de code HTML dans le SVG en HTML, ce qui me fait penser à son moi d'être stupide ou son impossible - les exemples sur internet semble juste être la façon d'intégrer le code HTML dans le SVG comme ci-dessus. Je vais plus profond.

InformationsquelleAutor Spacedman | 2011-09-17
  1. 41

    Cela fonctionne très bien pour moi:

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>
    • Grand - qui montre que c'est possible dans la pratique, et je ne suis pas fausse complètement le mauvais arbre. Je soupçonne mon html essais n'avaient pas de doctype, ou le mal des espaces de noms dans les mauvais endroits ou quelque chose. Je me souviens quand vous n'avez jamais eu à se préoccuper de ces choses (mais c'était en 1995).
    • Mise à jour: en fait, cela ne fonctionne pas sur Firefox 3.6.17 sur mon Ubuntu, mais sur un FF 6.0.2 et Chrome 12.0.x sur Windows. #updateverythingtime
    • C'est parce que le soutien pour le SVG en HTML, par opposition au soutien SVG, XHTML, n'a pas été ajoutés jusqu'à ce que Firefox 4, lorsque l'interrupteur à un parser HTML5 a été faite. Si vous souhaitez soutenir les anciens navigateurs, alors vous avez à servir le document en tant que application/xhtml+xml au lieu de text/html (modification de l'extension de fichier .xhtml fonctionne pour les fichiers locaux).
    • href="http://caniuse.com/#feat=svg-html5" >Voici le navigateur de la matrice de support
    • Très utile merci. Maintenant de comprendre pourquoi l'ensemble de la structure que j'ai construit qui veut utiliser cette échoue sur les dernières versions 🙂 Il y a peut être d'autres questions à venir plus tard!
    • Des accidents pour moi dans les deux Chrome v18 et Firefox v12.0 fois sous Ubuntu. Toutes les suggestions sur ce que je pouvais changer?
    • Qu'entendez-vous par 'accidents'? Fonctionne très bien pour moi dans Firefox 12 sur Fedora.
    • Votre exemple de code fonctionne sur Chrome 26, mais pas sur IE10, quel que soit votre navigateur matrice de prise en charge de lien. En fait, sur IE10, <foreignObject> n'est pas pris en charge.
    • Selon ce post il y a un vice déposé sur foreignObject de soutien. C'est le plus complet graphique de support SVG je sais d' mais il est un peu daté maintenant.
    • Fonctionne, mais le validateur n'a pas aimé 🙁 validator.w3.org/check
    • Nexmlns="http://www.w3.org/1999/xhtml"prévenir l'utilisation de html5 ?

    InformationsquelleAutor robertc