Home/ Questions/Q 8771265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:44:29+00:00

Is it possible to put a div inside an svg shape? Here’s an example

  • 0

Is it possible to put a div inside an svg shape?
Here’s an example of what I’m trying to do:

    <!DOCTYPE html>
    <html>
        <body xmlns="http://www.w3.org/1999/xhtml">
            <svg id="main" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <foreignObject x="10" y="10" width="100" height="150">
                    <div>I'm a div in an svg</div>
                </foreignObject>
                <rect fill="red" stroke="darkred" class="box" x="90" y="90" rx="20" ry="20" width="320" height="320" id="box_0">
                    <foreignObject width="100" height="50">
                        <body xmlns="http://www.w3.org/1999/xhtml">
                            <div>Hi, I'm a div inside a shape!! I don't work :(</div>
                        </body>
                    </foreignObject>
                </rect>
            </svg>  
        </body>
    </html>

The second <div> doesn’t show, is this somehow doable?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A <rect> element cannot have a <foreignObject> element as a child. You’d have to make the <foreignObject> element a later sibling and locate it on top of the rect element.

    • 0