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

时间:2016-10-13 16:40:47

标签: html css css3 svg

我试图使用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" />
&#13;
&#13;
&#13;

非常感谢

1 个答案:

答案 0 :(得分: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>