How to embed an HTML div inside of a svg

dom, svg

Solution

As mentioned by @Stasik, foreignObject can be used.

Example:

<svg>
    <foreignObject width="100" height="50"
               requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
      </body>
    </foreignObject>
<svg>

Extracted from: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Problem

Example: ``` <div> Hello World </div> <svg> <div> From SVG Land</div> </svg> ``` Question: Despite the tags, are SVG objects parsed separately and not some proper part of the dom tree? How do I get DIVs inside of SVG elements?

Original source