svg html要素を使用したクリップパスが機能しない

Question

svgを使用してイメージをクリップしようとしていますが、動作しません。

は、コードに従う：

img { 
 
    clip-path: url(#svgPath); 
 
}

<svg xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <rect x="286.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
     <rect x="286.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
     <rect x="582.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
     <rect x="582.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 

 
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" />

あなたはクローム、オペラ、サファリなど-webkit-ベンダープレフィックスを使用する必要が非常に多く

Answer 1

ありがとうclip-pathは実験的な機能であることを考えます。

詳しくはclip-pathブラウザのサポートはcaniuse.comにあります。

body { 
 
    margin: 0; 
 
} 
 
img { 
 
    -webkit-clip-path: url(#svgPath); 
 
      clip-path: url(#svgPath); 
 
}

<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" /> 
 
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <rect x="286.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274" fill="#ffffff"></rect> 
 
     <rect x="286.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
     <rect x="582.5" y="95" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
     <rect x="582.5" y="391" stroke="#000000" stroke-miterlimit="10" width="274" height="274"></rect> 
 
    </clipPath> 
 
    </defs> 
 
</svg>