All geek questions in one place

How to embed HTML div inside svg

Example:

<div> Hello World </div> <svg> <div> From SVG Land</div> </svg>

Question:

Despite the tags, SVG objects are parsed separately, rather than some kind of native part of the dom tree? How to get DIV inside SVG elements?

+6
source share
2 answers

Take a look at the object svg foreign objects. http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

+5
source

As @Stasik mentioned, 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

+1
source

Source: https://habr.com/ru/post/919969/

More articles:


All Articles