web-dev-qa-db-ja.com

SVG要素内にdivを追加することは可能ですか？

私はグラフを作成しようとしているSVG内にHTML divを追加しようとしています。以下のコードを使用して追加しようとしていますが、Firebugを使用して要素を検査すると、divはrect要素コード内に表示されますが、グラフUIには表示されません。

私が試みている方法に何か問題があるのですか、SVG内にdivを追加することは不可能ですか？

    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

HTMLをSVGに追加することはできません（技術的にはforeignObjectでできますが、これはうさぎの穴です）。さらに、SVGの可視要素はネストできないため、circle、rect、pathなどの要素に子要素を含めることはできません。

59
methodofaction

オブジェクトをグループ化することで、<g>と同様の目的を果たす<div>要素の使用も検討します。 詳細はこちら 。

27
Karolis Ramanauskas

同じ行に「rect」と「div」を追加しようとしています。おそらくそれがあなたが失敗しているところですD3のこれらのチュートリアルをチェックしてください... SVGに基づいた素晴らしいライブラリ http://alignedleft.com/tutorials/d3/drawing-svgs/

5
AnaMaria