SVG foreignObject behaves as though absolutely positioned in Webkit browsers
This issue is not specific to Chrome as I could reproduce it in Chrome 15.0.874.121 for Macintosh as well as Safari 5.1.2. (It also occurred in older versions of Firefox for Mac, such as version 3.6.8, but the behavior is correct in the current version.) This currently outstanding Webkit bug is likely to be the cause of the issue. Global coordinates are incorrectly used for elements inside the foreignObject which means when absolute positioning is used, those elements are placed relative to the main document flow rather than the foreignObject container, and thus the SVG translate is not applied to those elements.
I have not been able to locate a general solution to this issue.
For this specific example, this will fix the layout in all of the above-mentioned browsers:
.widget { position: relative; left: 100px; top: 200px;}