使用foreignObject插入图片时第三个元素未显示在DOM树的问题

你遇到的第三个<foreignObject>未出现在DOM树的问题，主要是两个原因导致的：

1. 缺少XHTML命名空间声明 #

SVG是基于XML的语法，<foreignObject>内部嵌入的HTML元素必须明确声明XHTML命名空间，否则浏览器无法正确识别这些元素，会直接忽略整个<foreignObject>节点。

2. 重复使用<body>标签 #

HTML规范中一个文档只能有一个<body>元素，即使在<foreignObject>内部重复使用，也会触发浏览器的解析异常，导致后续节点被跳过。

修复后的代码示例 #

把每个<foreignObject>里的<body>替换为带命名空间的<div>即可：

<g style="filter: url(#shadow);">
    <foreignObject width="200" height="200" x="150" y="150">
       <div xmlns="http://www.w3.org/1999/xhtml"> 
        <div id="target"><img src="/pie_svg/img/breakfast.png" style="clip-path: url(#circle-mask)"></div>
       </div>
     </foreignObject>

     <foreignObject width="200" height="200" x="500" y="100">
       <div xmlns="http://www.w3.org/1999/xhtml"> 
        <div id="target1"><img src="/pie_svg/img/reading.png" style="clip-path: url(#circle-mask)"></div>
       </div>
     </foreignObject>

     <foreignObject width="200" height="200" x="400" y="200">
       <div xmlns="http://www.w3.org/1999/xhtml"> 
        <div id="target4"><img src="/pie_svg/img/reading.png" style="clip-path: url(#circle-mask)"></div>
       </div>
     </foreignObject> 
</g>

补充说明 #

• 命名空间xmlns="http://www.w3.org/1999/xhtml"只需要在<foreignObject>内部的最外层元素上声明一次即可，内部嵌套的元素会继承这个命名空间。
• 不需要在<foreignObject>里使用<body>，直接用<div>作为容器完全可以满足需求，还能避免解析冲突。

内容的提问来源于stack exchange，提问作者MMaxPwD