SVG嵌入foreignobject div元素无法显示

在svg中嵌入html元素时，使用 foreignobject 去实现，但是最终在浏览器里边显示的svg中，div元素无法显示，代码如下：

<foreignObject x="24" y="20" width="220" height="39" stroke="red" stroke-width="1">
    <div>
        <div>
            xxxxxxxxx
        </div>
    </div>
</foreignObject>

用浏览器打开svg，其无法显示出div中的内容，后来查找了一下问题的答案，参考了以下： www.itbaoku.cn/post/591208…

www.coder.work/article/231…

解决方法： 在div中添加 xmlns="http://www.w3.org/1999/xhtml"。据说是命名空间的问题，设置命名空间后相当于告诉浏览器怎么解析该元素。暂时不太明白其中奥秘。 代码修改成：

<foreignObject x="24" y="20" width="220" height="39" stroke="red" stroke-width="1">
    <div xmlns="http://www.w3.org/1999/xhtml">
        <div>
            xxxxxxxxx
        </div>
    </div>
</foreignObject>