xml - SVGをforeignObjectに埋め込む方法は?

Question

MDN は次のように述べています。

適切な xmlns 属性仕様を持つ適切に定義された SVG サブドキュメントが再帰的に埋め込まれている場合を除き、foreignObject 内の 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>