Menu
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.
601
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper's page box.
Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements.
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.
98
<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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
