web-dev-qa-db-fra.com

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

J'essaie d'ajouter une div HTML à l'intérieur d'un SVG, que j'essaie de créer un graphique. J'essaie de l'ajouter en utilisant le code ci-dessous, mais lorsque j'inspecte un élément à l'aide de Firebug, le div est affiché dans le code d'élément rect, mais il n'apparaît pas dans l'interface graphique.

Est-ce que quelque chose ne va pas avec la méthode que j'essaie ou est-il impossible d'ajouter un 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");
javascriptjqueryhtmlsvg
38
sam

Vous ne pouvez pas ajouter HTML à SVG (techniquement vous pouvez avec foreignObject, mais c'est un trou de lapin). De plus, les éléments visibles dans SVG ne peuvent pas être imbriqués, donc les éléments tels que circle, rect, path et tels ne peuvent pas avoir d'éléments enfants.

59
methodofaction

J'envisagerais également d'utiliser <g> élément car il sert un objectif similaire à <div> en regroupant les objets. Plus d'informations ici .

27
Karolis Ramanauskas

Vous essayez d'ajouter "rect" ainsi que "div" sur la même ligne. C'est probablement là que vous échouez Consultez ces tutotiels pour D3 ... C'est une bibliothèque incroyable basée sur SVG http://alignedleft.com/tutorials/d3/drawing-svgs/

5
AnaMaria