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

Question

[Антон]

Есть картинка в SVG выглядит так

При наведении на облость картинки надо что бы подсвечивалась не одна точка а и ее соседние, вот так

и прикрепляю код самой SVG

<svg width="1185" height="385" viewBox="0 0 1185 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M534.032 175.455C534.032 176.637 532.698 177.524 531.215 177.524C529.584 177.524 528.25 176.637 528.25 175.455C528.25 174.272 529.584 173.386 531.067 173.386C532.698 173.386 534.032 174.272 534.032 175.455Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M534.181 181.366C534.181 182.549 532.846 183.436 531.215 183.436C529.584 183.436 528.25 182.549 528.25 181.366C528.25 180.184 529.584 179.297 531.215 179.297C532.846 179.297 534.181 180.184 534.181 181.366Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M542.338 175.455C542.338 176.637 541.152 177.524 539.521 177.524C537.889 177.524 536.555 176.637 536.555 175.455C536.555 174.272 537.741 173.386 539.373 173.386C541.004 173.386 542.338 174.42 542.338 175.455Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M542.486 181.366C542.486 182.549 541.152 183.436 539.668 183.436C538.037 183.436 536.703 182.549 536.703 181.366C536.703 180.184 538.038 179.297 539.52 179.297C541.152 179.297 542.486 180.184 542.486 181.366Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M550.639 175.455C550.639 176.637 549.453 177.524 547.821 177.524C546.19 177.524 544.855 176.637 544.855 175.455C544.855 174.272 546.042 173.386 547.673 173.386C549.303 173.534 550.639 174.42 550.639 175.455Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M550.789 181.366C550.789 182.549 549.603 183.436 547.971 183.436C546.34 183.436 545.006 182.549 545.006 181.366C545.006 180.184 546.192 179.297 547.823 179.297C549.455 179.297 550.789 180.184 550.789 181.366Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M558.943 175.455C558.943 176.637 557.756 177.524 556.126 177.524C554.495 177.524 553.16 176.637 553.16 175.455C553.16 174.272 554.346 173.386 555.977 173.386C557.608 173.534 558.943 174.42 558.943 175.455Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M559.241 181.366C559.241 182.549 558.055 183.436 556.424 183.436C554.793 183.436 553.459 182.549 553.459 181.366C553.459 180.184 554.645 179.297 556.276 179.297C557.907 179.297 559.241 180.184 559.241 181.366Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M567.247 175.603C567.247 176.785 566.061 177.672 564.43 177.672C562.799 177.672 561.465 176.785 561.465 175.603C561.465 174.42 562.651 173.534 564.282 173.534C565.913 173.534 567.099 174.42 567.247 175.603Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M567.542 181.366C567.542 182.549 566.356 183.436 564.725 183.436C563.094 183.436 561.76 182.549 561.76 181.366C561.76 180.184 562.946 179.297 564.577 179.297C566.06 179.297 567.542 180.331 567.542 181.366Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M534.181 187.13C534.181 188.312 532.846 189.199 531.215 189.199C529.584 189.199 528.25 188.312 528.25 187.13C528.25 185.948 529.584 185.061 531.215 185.061C532.846 185.061 534.181 186.095 534.181 187.13Z"/>

и т.д.

я думал подложить под ее картинку где уже все точки подсвечены, но тоже ничего из этого не получилось у меня

Comments

[kokapuk]

можно попробовать лепить к курсору радиальный градиент, от синего непрозрачного к синему прозрачному и накидывать на это clip-path с линкой на эту свою свгшку, которая будет показывать этот градиент только в кружках, а остальное будет спрятано за маской https://stackoverflow.com/questions/37644696/is-it...