CODEWITHSUNDEEP
htmlcsssvg
swenedo
swenedo

Reputation: 3114

SVG foreignObject and absolute positioning

I have a problem with absolute and relative positioning when I use it on html objects inside a svg:foreignObject.

I have made this jsfiddle to demonstrate my problem.

The div.wrapper should be at the same position as the rect in the svg:g, and the paragraphs inside this div should be positioned as described in the css.

I have the problem in the following browsers (Mac):

It works as I expect in Firefox 19.0.2.

Is there a problem with my code? Do anyone know how to solve this?

UPDATE

I found this bug, which might be the problem. It looks like there are a lot of issues with foreignObject on the issue tracker for webkit.

If someone have a workaround of how to position the paragraphs in the corners of the div I would appreciate it.

Upvotes: 12

Views: 10716

Answers (2)

long
long

Reputation: 31

<foreignObject width="200px" height="200px">
    <div xmlns="http://www.w3.org/1999/xhtml" class="wrapper" style="position: fixed">
        <p id="topleft">topleft</p>
        <p id="topright">topright</p>
        <p id="middle">middle</p>
        <p id="bottomleft">bottomleft</p>
        <p id="bottomright">bottomright</p>
    </div>
   </foreignObject>

position: fixed

Upvotes: 3

Marcelo Cora&#231;a de Freitas
Marcelo Cora&#231;a de Freitas

Reputation: 116

Long time since this post and the bug persist.

I actually found out that if you use x="50" Y="50" attributes in your foreignObject element it works as expected in Chrome.

I know it is not the same as transform, but at least you can position your content properly.

Upvotes: 10

Related Questions