|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
26.01.2015, 12:41 | #1 |
Новичок
Джуниор
Регистрация: 26.01.2015
Сообщений: 1
|
SVG и transform-style(preserve-3d)
Доброго времени суток друзья, я столкнулся с неприятной проблемой, цель сделать кнопку, без использования 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 |
26.01.2015, 14:13 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Дак нарисуй без SVG, блоками с радиусами. Preserve-3d по идее не должен работать внутри SVG.
Если уж так нужен именно СВГ, то разбей его на несколько отдельных.
Alar, верни репу!
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
matlab Fast Fourier Transform FFT | nurai88 | Помощь студентам | 0 | 25.07.2014 00:06 |
transform:scale замыливает шрифт | alex4321 | HTML и CSS | 4 | 05.11.2012 22:45 |
transform угол | Predator199 | HTML и CSS | 5 | 08.09.2012 13:34 |
как изменить css свойство transform из Js? | Даниил_глазко | JavaScript, Ajax | 2 | 15.10.2011 13:23 |
Canvas.Font.Style := Label.Font.Style; не выходит | ArtGrek | Общие вопросы Delphi | 3 | 23.02.2011 19:55 |