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>.