Изменение цвета областей на мозаичной карте мира круга SVG при наведении

Question

Я пытаюсь сделать карту мира, сделанную из SVG, состоящей из множества кругов. Я основал это из кодекса, который нашел здесь: https://codepen.io/mvaneijgen/pen/NRzENO

Например,

<svg viewBox="0 0 845.2 458">
    <circle class="st0" cx="826.1" cy="110.3" r="1.9"/>
    <circle class="st0" cx="819.3" cy="110.3" r="1.9"/>
    <circle class="st0" cx="819.3" cy="117.1" r="1.9"/>
    <circle class="st0" cx="812.6" cy="90" r="1.9"/>

Карта отличная. Я делил его на цветные континенты, используя классы. Они меняют цвет при наведении. Пока все хорошо. Большая часть моей функциональности есть.

Проблема в том, что вы должны зависать прямо на круге, чтобы изменить цвет. Я использую событие наведения мыши javascript, чтобы изменить цвет.

Можно ли как-нибудь увеличить область воздействия вокруг элементов круга? Может быть, поставить невидимый квадрат позади или впереди? Я все еще разбираюсь с интерфейсом, и любые указатели здесь были бы хороши.

Answer 1

Это правильная идея: прозрачный rect s за каждым кругом. (Или прозрачные пути в форме континента, основанные на геоданных, в зависимости от того, для чего вы собираетесь.)

Хитрость заключается в использовании свойства SVG CSS pointer-events. Установка fill или all должна помочь.