Est-il possible d'ajouter une div à l'intérieur d'un élément SVG?

Je suis en train d'ajouter une div à l'intérieur d'un SVG, que je suis en train de créer un graphique. Je suis en train de les ajouter à l'aide du code ci-dessous, mais quand j'ai inspecter l'élément à l'aide de Firebug, la div est indiquée à l'intérieur de rect élément de code, mais il n'apparaît pas dans le graphique de l'INTERFACE utilisateur.

Est-il quelque chose de mal avec la méthode que je suis en train ou est-il possible d'ajouter une div à l'intérieur d'un SVG?

    marker.append("rect")
   .attr("width", "50px")
   .attr("height", "50px")
   .append("div")
   .attr("id", function(d) {
      return "canvas_" + d.key.split(" ").join("_");
   })
   .style("width", "50px").style("height", "50px");
InformationsquelleAutor sam | 2013-07-11
  1. 58

    Vous ne pouvez pas ajouter du HTML au format SVG (techniquement, vous pouvez avec foreignObject, mais c'est un trou de lapin). En outre, les éléments visibles dans le SVG peut pas être imbriquées à l', de sorte que des éléments tels que circle, rect, path et telle ne peut pas avoir d'enfants éléments.

    • Merci pour la référence foreignObject!! il a travaillé
    • Gardez à l'esprit foreignObject ne fonctionne pas sous IE, dans le cas où vous avez besoin de compatibilité du navigateur.
    • Veuillez envisager d'accepter cette réponse si il résolu votre problème. Je sais que la spec et j'ai pu vérifier qu'elle est correcte.
    • developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
    • Intéressant! Dommage IE n'a même pas essayer de le soutenir. Fait amusant: <foreignObject> s'affiche dans SVGs enregistré à partir d'Adobe Illustrator lorsque vous cochez la Préserver les fonctions d'Édition d'Illustrator option.
    • "le cercle, le rectangle, le chemin et le tel ne peut pas avoir d'enfants éléments." Ils peuvent abriter des éléments non visibles, comme <animer> par exemple.

    InformationsquelleAutor methodofaction
  2. 27

    Je voudrais également envisager d'utiliser <g> élément, tel qu'il sert à des fins semblables comme <div> par le regroupement d'objets. Plus à ce sujet ici.

    • Tout à fait raison. g balise est mieux. Merci pour l'info.
    InformationsquelleAutor Karolis Ramanauskas
  3. 5

    Vous essayez d'ajouter "rect" ainsi que des "div" dans la même ligne. Porbably qui est l'endroit où vous ne
    Découvrez ces tutotials pour le D3... c'est un étonnant bibliothèque basée sur SVG
    http://alignedleft.com/tutorials/d3/drawing-svgs/

    • elle na pas de travailler avec nos rect soit.. j'ai juste ajouté rect coz je voulais savoir si l'ajout a été wrking
    • Découvrez ces tutoriels. Je peux vous promettre que vous allez apprendre beaucoup plus que juste SVG...
    • Bien sûr... merci!!!
    InformationsquelleAutor AnaMaria