HTML en SVG en tant que SVG

Récemment commencé à travailler avec html en SVG. Le code fonctionne bien FireFox mais Chrome n'affiche pas le contenu div.HTML en SVG en tant que SVG

Pouvez-vous s'il vous plaît m'aider à trier ce problème. Voici un exemple de code qui devrait afficher le contenu div comme "MY DIV" et un symbole Airport.

Le code est enregistré en tant que my_div.svg

Merci à l'avance.

 <?xml version="1.0" encoding="UTF-8"?> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewport-fill="red"> 
     <defs> 
      <!-- My div --> 
      <symbol id="my_div" viewBox="0 0 50 50" > 
       <foreignObject x="0" y="0" width="50" height="50" fill="red"> 
        <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50"> 
         <div>MY DIV</div> 
        </body> 
       </foreignObject> 
      </symbol> 

      <!-- Airport Symbol --> 
      <symbol id="airport" viewBox="0 0 10 10"> 
       <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/> 
      </symbol> 

     </defs> 

     <g fill="red" transform="scale(18)" > 

      <g transform="translate(0, 0)"> 
      <use xlink:href="#my_div" width="5" height="5"/> 
      </g> 

      <g id="demo" transform="translate(0, 0)"> 
      <use xlink:href="#airport" x="10" y="0" width="5" height="5"/> 
     </g> 

    </g> 
    </svg>

Source

2012-10-02 viskii420

On dirait que Chrome n'a qu'un support partiel pour foreignObject - voir http://caniuse.com/#feat=svg-html –

sauvé votre code que vous mettez ici comme SVG et j'ai reçu ceci:

Cette page contient les erreurs suivantes:

erreur sur la ligne 1 à la colonne 6: déclaration XML autorisés seulement au début du document Ci-dessous un rendu de la page jusqu'à la première erreur . Je l'ai corrigé en supprimant simplement la première ligne de code que vous avez fournie.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewport-fill="red"> 
     <defs> 
      <!-- My div --> 
      <symbol id="my_div" viewBox="0 0 50 50" > 
       <foreignObject x="0" y="0" width="50" height="50" fill="red"> 
        <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50"> 
         <div>MY DIV</div> 
        </body> 
       </foreignObject> 
      </symbol> 

      <!-- Airport Symbol --> 
      <symbol id="airport" viewBox="0 0 10 10"> 
       <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/> 
      </symbol> 

     </defs> 

     <g fill="red" transform="scale(18)" > 

      <g transform="translate(0, 0)"> 
      <use xlink:href="#my_div" width="5" height="5"/> 
      </g> 

      <g id="demo" transform="translate(0, 0)"> 
      <use xlink:href="#airport" x="10" y="0" width="5" height="5"/> 
     </g> 

    </g> 
    </svg>

Cela a fonctionné dans Chrome pour moi, (mac)

Source

2012-10-02 17:01:15

Il y avait un espace au début du code. Désolé. Quelle version de Chrome affichait le div interne "MY DIV". – viskii420

Je sais que cela ne résout pas cette erreur, mais je vous recommande d'utiliser SVG sans mélange HTML via foreignObject en elle. Lags support de IE et pourrait être résolu aussi bien avec les éléments et svg. Vous pouvez utiliser css pour le styler comme votre texte dans la boîte div.

Exemple: http://www.w3schools.com/svg/svg_text.asp

Source

2015-01-06 19:03:30

Les spécifications SVG ne permettent pas le contenu <foreignObject> à être réutilisée directement avec un élément <use>. Les navigateurs ont différé dans leur implémentation si oui ou non ils vous permettent de <use> contenu qui inclut un enfant <foreignObject> - il n'est pas expressément interdit par les spécifications, mais c'est un peu contourner l'intention.

L'implémentation de Firefox de <use> est fondamentalement un clone caché de tous les éléments DOM, donc ils n'ont aucun problème avec le clonage de tout type de contenu. Cependant, d'autres navigateurs lient plus fortement la source et copient les graphiques, et n'ont aucun mécanisme de copie pour foreignObjects.

Source

2015-01-07 16:12:56 AmeliaBR

HTML en SVG en tant que SVG

Répondre

Questions connexes