Why SVG mask doesn't work with CSS clip-path?

user_1255460 0
Viewed 111

I want to create a svg mask above the images, my codes are below, but it doesn't work, I don't know what's wrong with it. The actual effect which I want to do is that a circle mask above all sections, then scroll down the page, the pictures will be shown one by one within the circle.

<div class="mask">
  <svg width="0" height="0">
    <defs>
        <clipPath id="circle-mask" clipPathUnits="objectBoundingBox">
            <circle cx="100" cy="100" r="40"/>
        </clipPath>
    </defs>
  </svg>    
</div>
<div class="section"><img src="https://images.unsplash.com/photo-1593532847202-e818146e134a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" /></div>
<div class="section"><img src="https://images.unsplash.com/photo-1593532847202-e818146e134a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" /></div>
 ....

<style>
.mask {position: absolute;top:0;left:0;width:100%;height: 100%;z-index:2;}
.section {width: 100%; height: 100vh;}
.section img {width: 100%; clip-path: url(#circle-mask);}
</style>
svg css
1 Answers

When using clipPathUnits="objectBoundingBox" you need to consider values in the range [0,1] so you have to correct your clip-path like below.

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.section {
  height: 100vh;
  border:1px solid;
}

.section img {
  width:100%;
  height:100%;
  clip-path: url(#circle-mask);
}
<div class="mask">
  <svg width="0" height="0" >
    <defs>
        <clipPath id="circle-mask" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.4"/>
        </clipPath>
    </defs>
  </svg>
</div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" ></div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" style="width:auto;"></div>

You can get the same effect with a CSS mask:

.section {
  height: 100vh;
  border:1px solid;
}

.section img {
  height:100%;
  width:100%;
  -webkit-mask: radial-gradient(farthest-side,#fff 80%,transparent 81%);
          mask: radial-gradient(farthest-side,#fff 80%,transparent 81%);
}
<div class="section"><img src="https://picsum.photos/id/1/400/400" ></div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" style="width:auto;"></div>

user_86203330
Related