CODEWITHSUNDEEP
svgclip-path
user3699344
user3699344

Reputation: 93

SVG (with clip-path) appears blank in page

I am trying to create a image gallery where images are clipped to various shapes. I tried the below code with several svg paths but for all I just get a blank page in all the browsers (tested in chrome, firefox, IE and edge)

.arch{
      -webkit-clip-path:url(#clipArch);
       clip-path: url(#clipArch);
}
<div class="col-md-4">
                    <img class="arch" src="https://picsum.photos/200">
                    <svg width="100%" height="100%">
                        <defs>
                            <clipPath id="clipArch" clipPathUnits="objectBoundingBox">
                                <path class="st0" d="M920,917.48c0,11.63-9.43,21.05-21.05,21.05H183.18c-11.63,0-21.05-9.43-21.05-21.05V517.49
            c0-209.28,169.66-378.94,378.94-378.94S920,308.21,920,517.49V917.48z"/>
                            </clipPath>
                        </defs>
                    </svg> 
</div>

Upvotes: 0

Views: 252

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

  1. objectBoundingBox units go from 0 to 1 but your path's d attributes don't so that's clearly not going to work.
  2. When we remove that (so as to use userSpaceOnUse units) the clipPath is still not really over the shape so I've scaled and moved it via a transform so it mostly fits over the image you're trying to clip.

.arch{
      -webkit-clip-path:url(#clipArch);
       clip-path: url(#clipArch);
}
<div class="col-md-4">
                    <img class="arch" src="https://picsum.photos/200">
                    <svg width="0" height="0">
                                                                            <defs>
                            <clipPath id="clipArch">
<path class="st0" transform="scale(0.25) translate(-160, -130)" d="M920,917.48c0,11.63-9.43,21.05-21.05,21.05H183.18c-11.63,0-21.05-9.43-21.05-21.05V517.49
            c0-209.28,169.66-378.94,378.94-378.94S920,308.21,920,517.49V917.48z"/>

                            </clipPath>
                        </defs>
                    </svg> 
</div>

Upvotes: 1

Related Questions