イメージをセグメントに分割し、ホバリング時にCSSで変更します。

Question

私はこのようなイメージを4つのセグメントに分けています。私はホバー上の各セグメントのぼかしを変更できるようにしたい。例えば：

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

Iは、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="https://i.stack.imgur.com/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>

これは、長方形のクリッピングマスクを持つだけの簡単な例ですが、任意の形状のマスクで動作するはずです。