Question

我试图使用svg剪辑图像，但它无效。

遵循以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢

Answer 1

您需要使用-webkit-供应商前缀作为chrome，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>

使用svg html元素的剪辑路径不起作用

1 个答案: