CODEWITHSUNDEEP
htmlsvgdomforeignobject
MMaxPwD
MMaxPwD

Reputation: 3

Object doesn`t appear in DOM

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>

enter image description here

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.

Upvotes: 0

Views: 101

Answers (1)

chrwahl
chrwahl

Reputation: 13050

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>

Upvotes: 0

Related Questions