Как решить проблему с вектором на сайте?

Question

[Антон Мелентьев]

Добрый день! У меня две огромные проблемы с вектором на сайте. Вектор через polygon отрисовывает при наведении контур этажа жилого дома. Сделано для показа планировок квартир конкретного этажа.

1. SVG работает на всех браузерах, кроме Мозилы.
2. Если плавно скользить по этажам, то эффект нормально срабатывает снизу вверх, обратно получается прерывисто.

Помогите, пожалуйста, решить проблемы.

P.S. ссылку вставить, почему-то, не могу...

Comments

[Stalker_RED]

htmlbook.ru/html/a

[Максим]

вопрос для Бабы Ванги ?
Как догадываться о том что у вас накосячено ?

[Антон Мелентьев]

Максим Ленский: jk-dozhd точка ru

[Максим]

Антон Мелентьев: на сайте в Chrome одно а в Mozilla другое отображается ... офигеть

[Максим]

Антон Мелентьев: и анимация по этажам вообще не работает в Mozilla

[Максим]

Максим Ленский: вам надо переделать вёрстку , у вас тег SVG IMAGE не так вставлен , а надо через pattern вставлять , вы сами делали это ?

[Антон Мелентьев]

Максим Ленский: нет, через инспектор не понятно даже куда она poligon`ы пихает

[Антон Мелентьев]

Максим Ленский: да

[Антон Мелентьев]

Максим Ленский: хром то всё понял

[Антон Мелентьев]

Максим Ленский: и IE и даже Вивальди

[Максим]

Антон Мелентьев: тег IMAGE в SVG поддерживается только через PATTERN и больше ни как , потому у вас не кроссбраузерно

[Антон Мелентьев]

Максим Ленский: ок, понял, спасибо, как быть с плавностью анимации в хроме?

[Максим]

Антон Мелентьев: вы сделайте , а потом будем думать о плавности анимации

[Максим]

Антон Мелентьев: на самом деле так , самоучка видать , но мы все начинали с Ошибок

[Антон Мелентьев]

Максим Ленский: это надо было сделать быстро, поэтому из шаблона сделал на скорую руку. даже стили в теле писал

[Максим]

Антон Мелентьев: ладно разберёмся ! делайте как положено что бы везде работало .. и потом подумаем о анимации

[Максим]

Антон Мелентьев: но самое интересное что вообще анимация не работает в FireFox

[Антон Мелентьев]

Максим Ленский: pattern не помог

[Максим]

Антон Мелентьев: всё верно делаете , только для pattern и для image надо width и height

[Максим]

Антон Мелентьев: https://developer.mozilla.org/ru/docs/Web/SVG/Elem...

[Антон Мелентьев]

Максим Ленский: вроде всё сделал по правилам, но не работает

[Максим]

Антон Мелентьев: не всё ! каждый слой polygon находится в отдельном <g></g> слое

[Антон Мелентьев]

Максим Ленский: угу

[Максим]

Антон Мелентьев: а почему path отдельно ?

Answer 1

[Николай]

В мозиле нужно кроме svg нужно через css указать для id или class в них clip-path со значениями polygon, разделить все значения на 100 и добавить значок процента. Читай инфу по clip-path. У тебя все получится.

Comments

[Антон Мелентьев]

Спасибо, у меня супер длинные координаты у точек. Это как-то можно оптимизировать?

[Николай]

Антон Мелентьев: онлайн редакторы svg я встречал, но к сожалению не видел, которые выводили значеия в clip-path