如何在svg中嵌入HTML div

6 svg dom

例:

<div> Hello World </div>

<svg>
<div> From SVG Land</div>
</svg>
Run Code Online (Sandbox Code Playgroud)

题:

尽管有标签,SVG对象是单独解析而不是dom树的某些适当部分?如何在SVG元素中获取DIV?

小智 8

正如@Stasik 所提到的,可以使用foreignObject。

例子:

<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>
Run Code Online (Sandbox Code Playgroud)

摘自: https : //developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject


Sta*_*sik 6

看一下svg的异物设施.http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

  • 链接的摘要会很好.它是在你写这个答案之前4年写的,现在已经过了3年了.它仍然是一个奇迹,但我们可能不应该按我们的运气. (3认同)