SVG и transform-style(preserve-3d)

[AlexandrNB]

Доброго времени суток друзья, я столкнулся с неприятной проблемой, цель сделать кнопку, без использования Java script желательно с помощью вектора SVG. В чем суть кнопку я сделал но вот браузер увы поддерживает ее только Mozila. Дело в том что web kit браузера, так же поддерживают preserve-3d но только когда дело касается чистого CSS. А вот SVG и CSS не как. я могу сделать тоже самое и на CSS но надо SVG т.к возможностей для вывода графики на втором намного больше. Мне нельзя так же использовать Java script. С ним бы тоже не возникло проблем.

А проблема заключается в следующем при использование в SVG <g id="sphere"> </g>
и описании в scss или в css transform-style(preserve-3d). Firefox переводит группу в 3d, но Webkit броузера отказываются это делать на отрез, хотя при работе с обычными тегами в html как div они прекрасно дают дочернем элементам 3d пространство по оси XYZ. В svg же они совсем игнорируют такие теги <Symbol или <g и просто все дочерние элементы в 2D. Если есть знающие как с этим бороться, то пожалуйста дайте совет очень надо. Если нет то у меня есть уже тоже самое на Css.(
Саму сферу можете посмотреть тут. При Firefox будет все отлично работать но Webkit делает сферу плоской. Возможно у меня где-то ошибка но найти ее мне так и не удалось(.
http://codepen.io/anon/pen/NPjOZv?editors=110

[Naive]

Дак нарисуй без SVG, блоками с радиусами. Preserve-3d по идее не должен работать внутри SVG.
Если уж так нужен именно СВГ, то разбей его на несколько отдельных.