Как разместить svg не квадратным блоком, а чтобы наведение осуществлялось только по границам этой SVG?

Question

[Денис Букреев]

Самый яркий пример - карты.
Есть множество svg-элементов, которые плотно прилежат друг к другу неровными границами.

Располагая эти SVG тегом img мы получим квадратный блок для взаимодействия
С помощью svg>use тоже квадратный блок.
Для взаимодействия с мышью это абсолютно неудобно, ведь надо чтоб каждая SVG была самостоятельной и не перекрывала(сь) другие(ми)

Как же тогда реализовать?

Answer 1

[Aleksey Solovyev]

"5 лет занимаюсь веб-разработкой" (c)
Давайте подумаем... Как можно еще размещать svg на странице? Какие есть еще варианты? Кроме<img>...

ps https://jsfiddle.net/p6Lc3nco/

Answer 2

[alvvi]

Сделайте это одним тегом svg и вставьте его инлайново.

Comments

[Денис Букреев]

и


оба блока квадратные и реагируют на мышь квадратными границами, хотя сама svg - сложная фигура

[alvvi]

Денис Букреев, если у вас одни path - вся фигура, вы никак не сможете с ее частями взаимодействовать. Это практически равносильно графике нарисованной с помощью JS в канвасе. Разбейте этот path на группу более мелких path в любом векторном редакторе и взаимодействуйте с отдельными path из этой группы.

Answer 3

[Андрей Б.]

www.petercollingridge.co.uk/data-visualisation/mou...
И лучше делать одним svg