对象没有出现在 DOM 中

问题描述 投票：0回答：1

我正在尝试使用foreignObject 在 HTML 代码中添加 3 张图片。我的代码如下。问题是最后一个foreignObeject(id="target4")没有出现在DOM树中，但是第一个和第二个却出现了。

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

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

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

enter image description here

如果有人能告诉我这种行为的原因，那就太好了。我相信有一些语法错误，但我花了很多时间却什么也没发现。

html svg dom foreignobject
1个回答
0
投票

就像评论的那样，这个错误并不是真正可重现的。那么 

<image>
元素可能是更好的选择。无论如何，将 xmlns 属性添加到 
<foreignObject>
内的根元素非常重要。

<svg xmlns="http://www.w3.org/2000/svg" height="100vh" viewBox="0 0 800 500">
  <g>
    <foreignObject width="200" height="200" x="150" y="150">
      <div xmlns="http://www.w3.org/1999/xhtml" id="target">
        <img src="https://via.placeholder.com/200/09f/fff.png">
      </div>
    </foreignObject>
    <foreignObject width="200" height="200" x="500" y="100">
      <div xmlns="http://www.w3.org/1999/xhtml" id="target1">
        <img src="https://via.placeholder.com/200/09f/fff.png" >
      </div>
    </foreignObject>
    <foreignObject width="200" height="200" x="400" y="200">
      <div xmlns="http://www.w3.org/1999/xhtml" id="target4">
        <img src="https://via.placeholder.com/200/09f/fff.png">
      </div>
    </foreignObject> 
  </g>
</svg>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.