xml - 如何在 foreignObject 中嵌入 SVG？

Question

MDN says :

将不会绘制 foreignObject 中的任何 SVG 元素，除非以递归方式嵌入具有正确 xmlns 属性规范的正确定义的 SVG 子文档。

我已经尝试为所有后续元素设置正确的命名空间，但没有成功。

我想要完成的大致是这样的:

<svg>
   <foreignObject>
      some html text
      <svg width="10" height="10"><rect fill="red" width="10" height="10" /></svg>
   </foreignObject>
</svg>

Answer 1

您必须在 foreignObject 中有一个元素，尽管该元素可能有子元素。所以你可以这样做......

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">some html text
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect fill="red" width="10" height="10" /></svg>
    </div>
  </foreignObject>
</svg>