SVG foreignObject and absolute positioning
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.
<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