如何在foreignObject中嵌入SVG？

Question

MDN 上说:

在 foreignObject 中的任何 SVG 元素都不会被绘制，除非递归嵌入一个具有正确 xmlns 属性规范的正确定义的 SVG 子文档。

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

我想要实现的大致内容是：

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

- Emil

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>

- Robert Longson

---

我无法重现您尝试使用<img src="./path/toSVG.svg"/>的结果。 - besthost

foreignObject在Chrome的img元素中不起作用，但在Firefox中可以。 - Robert Longson