How to Dynamically Adjust SVG ClipPath Dimensions to Match Container Width?

How to Customize SVG ClipPath Dimensions

This article provides a solution for dynamically adjusting the size of a ClipPath area defined by an SVG. By utilizing the SVG as a mask, you can easily manipulate its dimensions and position.

Understanding the Problem

In the provided code snippet, a rectangular container with a green background has a clipped SVG image. The goal is to increase the dimensions of the clipping shape to match the width of the colored green area.

Solution: Using SVG as a Mask

To achieve the desired effect, the SVG can be applied as a mask to the clipped image. By setting the viewBox attribute of the SVG correctly, you can control its size and position. Here's an updated version of the code:

CSS:

.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;
}

HTML:

<div>

Explanation:

• The CSS for .clipped-img now uses the mask property to apply the SVG as a mask.
• The viewBox attribute of the SVG has been set to "0 0 207 167" to match the dimensions of the clipping shape.
• By specifying the width of the img-container in different divs, you can easily adjust the size of the SVG mask and the clipped area.

The above is the detailed content of How to Dynamically Adjust SVG ClipPath Dimensions to Match Container Width?. For more information, please follow other related articles on the PHP Chinese website!