CODEWITHSUNDEEP
domsvg
user1311390
user1311390

Reputation:

How to embed an HTML div inside of a svg

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?

Upvotes: 7

Views: 12323

Answers (1)

Parijat Khan
Parijat Khan

Reputation: 201

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

Upvotes: 8

Related Questions