Обходной путь для фоновой ошибки WebOit SVG foreignObject?

Question

При встраивании html внутри SVG с использованием тега foreignObject браузеры на основе webkit отображают фоны встроенных html-элементов за элементами svg. См. http://code.google.com/p/chromium/issues/detail?id=35545.

Вот пример: http://www.mxgraph.com/demo/markup/webkitbg.html Зеленый div должен быть сверху красного.

Кто-нибудь знает обходной путь для этой проблемы? Может быть, какое-то заклинание z-index и / или группирование элементов или что-то в svg, чтобы обмануть webkit и сделать правильные вещи?

Answer 1

Это ошибка webkit 58417 , исправленная 2011-11-10.Это исправление в версии 17 Chromium, которая в настоящее время находится в бета-версии на 2012-01-09 и должна быть выпущена в начале февраля.Не уверен, когда исправление попадет в Safari, но, к счастью, мне не нужно его поддерживать.

Так что обходной путь кажется "подождать месяц" ...

Answer 2

Я только что столкнулся с той же проблемой. Несмотря на то, что в Chrome долгое время исправлена ​​ошибка, Safari, похоже, отстает от кодовой базы.

Мое решение - добавить style="display:inline-block" к первому дочернему элементу тега foreignObject. Похоже, это решает проблему.