Question

我在SVG中嵌入了庞大的lazy val x = (huge expression)地图，该地图比浏览器窗口大得多，并且居中于屏幕。

image

有两条路径。一条道路勾勒出一栋建筑物。另一条路径在地图上勾勒出一个子区域。

用户可以单击这些路径，然后使用<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' />    </svg>将特定路径逐渐集中在屏幕中间。

一旦路径居中，我想做的就是剪切或遮盖该路径之外的所有内容，以便图像/地图的唯一可见部分是已选择并居中的路径。

有人知道该怎么做吗？

我尝试在HTML中原生使用transition并将其应用于CSS中的SVG，但这两种方法似乎都无效。要么就是我做错了事。

Here is a working demo of the project.

建筑物可以位于地图的顶部中间部分附近。考虑到其大小，该子区域更容易定位，该子区域位于地图的右下角。如果您clipPath，则路径将mouseenter。如果单击它们，它们将在屏幕上居中。

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>

剪切/掩盖SVG链接图像的子部分

1 个答案: