CODEWITHSUNDEEP
htmlsvg
diCoy
diCoy

Reputation: 79

HTML <div> inside SVG shape

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?

Upvotes: 2

Views: 6884

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

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.

Upvotes: 3

Related Questions