使用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" />

非常感謝您

Answer 1

您需要使用-webkit-供應商名稱鉻，Opera和Safari考慮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>