divタグをSVG rect要素に追加する方法は？

Question

この問題の正しい解決策を見つけることができなかったので、新しい質問を書くことにしました。

私はこれが可能だとは確信していませんが、私はそれが願っています。

ここに、ブラウザが提供するHTMLがあります。私はそれをブラウザの "Elements"タブからコピーしています。

<svg width="960" height="728" style="margin-left: 0px;"> 
<g transform="translate(0,24)" style="shape-rendering: crispEdges;"> 
    <g class="depth"> 
     <g> 
      <g> 
       <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);">1.1.1. 
        <div class="jstree"> 
         <div>TestContent</div> 
        </div> 
       </rect> 
      </g> 
     </g> 
    </g> 
</g> 

（私はJSですべてを作成しています）。

私の問題は、このdivをrectタグの中に作成していますが、このdivとその内容は四角形の内側の画面に表示されません。

これを表示させることができるかどうか、それがどういうものか知りたいですか？

Answer 1

残念ながら、あなたはできません。は、SVG要素にHTML要素を追加できません。

SVGにdiv（又はp、h1、liなど）を使用するための唯一の方法は、foreignObjectを使用することです。あなたのコードでは、このような何か：foreignObjectは長方形後、ないその内部に（あなたのコードのように）来ることを

<svg width="960" height="728" style="margin-left: 0px;"> 
 
<g transform="translate(0,24)" style="shape-rendering: crispEdges;"> 
 
    <g class="depth"> 
 
     <g> 
 
      <g> 
 
       <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);"> 
 
       </rect> 
 
       <foreignObject x="100" y="100" width="100" height="100"> 
 
\t \t  <div xmlns="http://www.w3.org/1999/xhtml" class="jstree"> 
 
         <div>TestContent</div> 
 
        </div> 
 
\t   </foreignObject> 
 
      </g> 
 
     </g> 
 
    </g> 
 
</g>

注意してください。また、foreignObjectがIEで動作しないことに注意してください。https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject