Интерактивная карта с svg и css?

Question

[Сергей Васенин]

Подскажите как реализовать SVG интерактивную карту без использования обычной картинки. У многих в уроках используют картинку и поверх уже прописывают svg элементы. Я же хочу сделать полностью на svg фон и элементы к нему но вот не знаю как правильно сделать это...

Comments

[Zombie42679]

на svg элементы вешай события (onclick в html/addEventListener если по id или классу) и создавай тем самым интерактивность.

[yarovikov]

С компа смотри верстку и код. Там все просто. Это кликабельная свг https://ib.yarovikov.com/services/

[Максим]

yarovikov, malihu.myCustomScrollBar наверно самый лучший для стилизации scroll да ?

[yarovikov]

Максим Ленский, я другие не пробовал))

[Rustam Bainazarov]

yarovikov, не используйте это.

Используйте это: https://github.com/KingSora/OverlayScrollbars

[yarovikov]

Рустам Байназаров, а в чем проблема?

[Rustam Bainazarov]

yarovikov, jQuery, ломает механизмы нативного скроллинга, не обновлялся 3+ года.

Answer 1

[Ivan Bogachev]

Подскажите как реализовать SVG интерактивную карту без использования обычной картинки. У многих в уроках используют картинку и поверх уже прописывают svg элементы. Я же хочу сделать полностью на svg фон и элементы к нему но вот не знаю как правильно сделать это...

Если взять интерактивную карту, состоящую из картинки и SVG поверх нее (как в этой статье), и убрать картинку, то останется интерактивная карта, состоящая только из SVG. Это вроде как очевидно. Вы можете дорисовывать или раскрашивать элементы в SVG на свой вкус, но принцип работы интерактивной части останется тем же.