SVG foreignObject и абсолютное позиционирование

Question

У меня проблема с абсолютным и относительным позиционированием, когда я использую его на объектах html внутри svg:foreignObject.

Я сделал это jsfiddle, чтобы продемонстрировать свою проблему.

div.wrapper должен находиться в том же положении, что и rect, в svg:g, а абзацы внутри этого div должны быть расположены так, как описано в css.

У меня есть проблемы в следующих браузерах (Mac):

• Safari 6.0.3
• Chrome 26.0.1410.63
• Maxthon 4.0.3.6000.

Работает так, как я ожидаю, в Firefox 19.0.2.

Есть проблемы с моим кодом? Кто-нибудь знает, как это решить?

UPDATE

Я нашел this bug, что может быть проблемой. Похоже, есть много проблем с foreignObject на issue tracker для webkit.

Если у кого-то есть обходное положение, как разместить абзацы в углах div, я был бы признателен.

Answer 1

С тех пор, как этот пост и ошибка сохраняются.

Я действительно узнал, что если вы используете атрибуты x="50" Y="50" в своем элементе foreignObject, он работает так, как ожидается, в Chrome.

Я знаю, что это не то же самое, что и transform, но, по крайней мере, вы можете правильно разместить свой контент.