Menu
I have such code:
.img-container {
width: 300px;
height: 300px;
background-color: lightgreen;
overflow: hidden;
}
.clipped-img {
clip-path: url('#header-clip-svg');
}<div class="img-container">
<!--clipping SVG-->
<svg height="0" width="0">
<defs>
<clipPath id="header-clip-svg">
<path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path>
</clipPath>
</defs>
</svg>
<!-- clipped image-->
<img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
</div>I want to increase the clipping shape dimensions so it will be of the width of colored green area. Is there a way to do achieve this?
437
The <clipPath> SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
Method1: The SVG image will be taking 100% of all the width and height available to it. To make the image of the desired size set the CSS height and width property of the image Method 2: Directly modify the .svg file and set the width and height to the desired value.
Those two values are 1/329.6667 and 1/86, respectively, and they effectively scale every point in the d attribute to fit into the needed 0–1 range. Thus we have an SVG clipping path that scales with the element and fits to its dimensions!
# The height and width attributes. So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG. Which, as mentioned above, will be either 150px or 100vh, depending on the browser.
To use the padding-bottom hack to control the aspect ratio of the total <svg> area, the official height is going to be (essentially) zero. With the default preserveAspectRatio value, the graphic would be scaled down to nothing.
You can apply the SVG as a mask and easily adjust its size and position (like you can with background-image). Simply make sure you set the correct value for the viewbox:
.img-container {
width: 300px;
height: 300px;
background-color: lightgreen;
margin:5px;
}
.clipped-img {
width:100%;
height:100%;
display:block;
object-fit:cover;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' )
center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' )
center/contain no-repeat;
}<div class="img-container">
<img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>
<div class="img-container" style="width:500px;">
<img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>
<div class="img-container" style="width:150px;">
<img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
</div>
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
