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

Tags:

Html

Css

Svg