CODEWITHSUNDEEP
cssgoogle-chromesvgclip-path
43Tesseracts
43Tesseracts

Reputation: 4937

css clip-path with svg not working in Chrome

I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.

Chrome should support an inline svg clip-path according to this.

And full support according to MDN.

<style>

  img {
    width: 40%;
    height: auto;
    display: inline;
  }
  .clip {
      -webkit-clip-path: url('#clip');
      clip-path: url('#clip');
  }
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">

<img src="https://i.imgur.com/nnHdzO6l.jpg" >

<svg version="1.1"
     baseProfile="full"
     height="400"  width="400"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
     <clipPath id="clip" 
               clipPathUnits="objectBoundingBox"
               transform="scale(0.0025, 0.0025)">
               <!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
       <circle cx="50%" cy="50%" r="50%" />
       <rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
     </clipPath>
  </defs>
</svg>

Upvotes: 0

Views: 2506

Answers (1)

Mark Nunes
Mark Nunes

Reputation: 965

External SVG files are not supported by Chrome at the moment.

You can check this here: https://caniuse.com/#search=CSS%20clip

Here is what they say about the Partial support for Chrome:

Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.

Upvotes: 2

Related Questions