I am trying to add 3 pictures in HTML code using foreignObject. My code is below. The issue is that the last foreignObeject(id="target4") doesn`t appear in DOM tree, but the first one and the second are there.
<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>
It will be great if somebody can tell me the reason for such behaviour. I believe that there is some syntax error but I've spent so much time and found nothing.
Like commented this error is not really reproducible. And then the <image> elements was maybe a better choice. Anyway it is important that you add the xmlns attribute to the root element inside the <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>