javascript - 将图像分成多个部分以在悬停时使用 css 更改它们

Question

我有一张像这样的图像，分为 4 个部分。我希望能够在悬停时更改每个片段的模糊度。例如:

#segment1:hover {
  filter: blur(50px);
} 

我尝试将这些片段转换为 svg 蒙版，然后像本例中那样使用剪辑路径 this example , 但 css 仍然将其解释为整个图像，即使它只有一部分是可见的。 划分这些段的曲线的形状很复杂，(我想)应该使用 svg，因此检查 x 和 y 位置的 javascript 技巧以及 html < map > 标签不起作用。

你会如何解决这样的问题？谢谢!

这是第一个段掩码的 svg 代码(以防万一)。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1920.000000pt" height="1081.000000pt" viewBox="0 0 1920.000000 1081.000000"
 preserveAspectRatio="xMidYMid meet">
<path transform="translate(0.000000,1081.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none" d="M0 6557 l0 -4254 118 -12 c64 -7 137 -18 162 -23 73 -17 432 -19 530
-3 47 8 124 18 171 24 109 12 305 56 389 86 36 13 88 32 115 41 178 62 184 64
500 247 204 118 404 270 593 451 204 195 424 506 538 758 20 45 46 97 56 113
10 17 18 38 18 48 0 10 12 41 26 69 15 29 35 83 46 121 10 38 27 86 38 107 10
20 24 59 31 86 7 27 24 76 39 109 30 65 68 168 96 255 53 169 121 283 298 499
158 193 340 327 536 393 l95 33 220 -1 220 0 136 -36 c75 -20 179 -55 231 -77
52 -22 153 -57 224 -76 71 -20 143 -40 159 -46 68 -24 166 -48 241 -58 43 -5
121 -16 171 -23 115 -15 205 -4 378 47 180 53 220 70 314 135 312 214 446 443
523 890 15 89 4 313 -28 595 -34 301 -43 630 -21 771 15 89 90 341 131 436 18
41 95 177 159 278 64 100 141 195 251 308 233 239 386 339 746 487 307 126
430 214 538 382 41 63 51 115 52 247 0 84 -6 132 -26 215 -15 58 -27 116 -29
128 -6 61 -160 292 -289 435 l-61 68 -4317 0 -4318 0 0 -4253z"/>
</svg>

Answer 1

可能是这样的:

.x { opacity:0; }
.x:hover { opacity:1; }

<svg width="400" height="300" viewBox="0 0 800 600">
  <defs>
    <filter id="blur">
       <feGaussianBlur stdDeviation="8"/>
    </filter>
    <image href="/image/DkIzu.jpg"
           width="800" height="600" id="img"/>
    <clipPath id="c1">
      <path d="M0 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c2">
      <path d="M400 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c3">
      <path d="M0 300h400v300h-400z"/>
    </clipPath>
    <clipPath id="c4">
      <path d="M400 300h400v300h-400z"/>
    </clipPath>
  </defs>
  <use xlink:href="#img"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c1)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c2)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c3)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c4)" class="x"/>
</svg>

这只是一个简单的矩形剪切蒙版示例，但应该适用于任何形状的蒙版。