html - 剪裁/屏蔽 SVG 链接图像的子部分

Question

我有一个巨大的image嵌入在 SVG 中的 map ，它比浏览器窗口大得多并位于屏幕中心。

<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>

有两条路。一条路径勾勒出一座建筑。另一条路径勾勒出 map 上的一个子区域。

用户可以单击这些路径，此时该特定路径将使用 transition 逐渐居中在屏幕中间。 .

路径居中后，我想做的是剪切或遮盖该路径之外的所有内容，以便图像/ map 的唯一可见部分是选定和居中的路径。

有人知道怎么做吗？

我试过使用 clipPath native 在 HTML 中并将其应用于 CSS 中的 SVG，这两者似乎都不起作用。要么是那样，要么是我做错了什么。

Here is a working demo of the project.

建筑物可以位于 map 的顶部中间部分附近。子区域位于 map 的右下角，考虑到它的大小，更容易定位。 如果您 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>