CODEWITHSUNDEEP
htmlcsssvg
Ricardo Rocha
Ricardo Rocha

Reputation: 16216

Clip-path using svg html element is not working

I'm trying to clip an image using a svg but it is not working.

Follows the code:

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

Thank you very much

Upvotes: 0

Views: 317

Answers (1)

Khaled Mashaly
Khaled Mashaly

Reputation: 1185

You need to use the -webkit- vendor prefix as chrome, opera and safari consider clip-path to be an experimental feature.

More on clip-path browser support can be found on 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>

Upvotes: 1

Related Questions