Как сделать кликабельную svg-картинку с подсказками?

Question

[Aljo]

Здравствуйте!

Потребовалось сделать на сайте такой функционал:


Это svg-картинка, на которой каждая из круглых иконок - кликабельная. По клику показывается над иконкой подсказка.

Подскажите пожалуйста, о чем мне нужно почитать, чтобы понять как такое реализовывается?
Заранее спасибо

Comments

[Rerurk]

Js onmousedown события

[Ankhena]

Отлавливайте клик на нужной части svg. В этом смысле теги внутри svg ничем не отличаются от любых других.

[Нікіта]

Почему просто не обернуть картинку в тег <a>?

[Антон Литвиненко]

Нікіта Кошик, что это даст если необходимо в 4х местах картинки сделать 4 разных подсказки?

Answer 1

[Максим]

Я сделал только одну иконку и один клик : https://codepen.io/topicstarter/pen/KKXOaXo
В вашем случае надо нарисовать облачко и расположить текст выше облачка и вообще сделать всю иерархию
Ну а после работают обычные правила как и в css так и в javascript

Answer 2

[Олег]

по старинке htmlbook.ru/html/map если у картинки будут фиксированные размеры и вас устроит, что зоны клика квадратные.

или https://developer.mozilla.org/en-US/docs/Web/SVG/A...
неплохой процент поддерживаемости
https://caniuse.com/?search=svg%20href
не будет работать в китае и у гиков на андроиде

Comments

[Ankhena]

В map зоны клика не квадратные, а какие нарисуете.

Да и зачем это всё, если просто отлавливается клик по части svg самым обычным способом, как делают простые тултипы.

[Олег]

Ankhena, через javascript клики я бы ловил только в случае, если там акшен тоже явоскриптовский. А простые ссылки лучше чтобы могли с отключенным JS работать.

Хотя в реальности любителей отключать явоскрипт в броузере меньше чем пользователей UCBrowser.

[Adamos]

Смысл использования SVG в вебе в первую очередь в том, чтобы уйти от "фиксированных размеров".

[Ankhena]

Олег, тултипы это по любому не простые ссылки, даже если они с href для доступности на случай отвалившегося js.