Подрезка / маскировка деталей SVG Linked Image

Question

У меня есть массивная image карта, встроенная в SVG, которая намного больше окна браузера и центрирована на экране.

<svg id='map' width='7192' height='3912' viewBox='0 0 7192 3912' version='1.1'>
  <image width='7192' height='3912' x='0' y='0' preserveAspectRatio='none'
    xlink:href='map.jpg' />
  <!-------------------->
  <!-- paths are here -->
  <!-------------------->
</svg>

Есть два пути. Один путь очерчивает здание. Другой путь выделяет субрегион на карте.

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

Как только путь отцентрирован, я хотел бы вырезать или замаскировать все, что находится за пределами этого пути, так что единственной видимой частью изображения / карты является путь, который был выбран и отцентрирован.

Кто-нибудь знает, как это сделать?

Я пытался использовать clipPath изначально в HTML, а также применять его к SVG в CSS, оба из которых, похоже, не работают. Либо это, либо я делаю что-то не так.

Вот рабочая демонстрация проекта.

Здание может быть расположено рядом с верхней средней частью карты. Субрегион, который легче найти, учитывая его размер, расположен в правом нижнем углу карты. Если вы их mouseenter, пути будут fill. Если вы нажмете на них, они будут центрированы на экране.

Answer 1

Вы можете повторно использовать содержимое пути клипа в качестве целевой области для событий указателя, если вы комбинируете селекторы одного уровня с правильным значением для pointer-events. Установка этого свойства будет определять, когда применяются псевдоклассы CSS, и какие события мыши будут записываться. Ваш центрирующий код может быть вызван событием click.

document.querySelectorAll('.highlight').forEach(use => {
    use.addEventListener('click', e => {
        alert(use.id + " was clicked.");
    });
});

.highlight {
  fill: none;
  pointer-events: fill;
}
image {
  pointer-events: none;
}
#h1:hover ~ image {
  clip-path: url(#clip1);
}
#h2:hover ~ image {
  clip-path: url(#clip2);
}

<svg width="500" height="331">
  <clipPath id="clip1">
    <rect id="path1" x="20" y="20" width="80" height="80" />
  </clipPath>
  <clipPath id="clip2">
    <circle id="path2" cx="400" cy="200" r="80" />
  </clipPath>
  <!-- use elements must be direct siblings preceding the image -->
  <use class="highlight" id="h1" xlink:href="#path1" />
  <use class="highlight" id="h2" xlink:href="#path2" />
  <image xlink:href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="500" height="331" />
</svg>