How to Resize an SVG Clip Path to Match the Containing Element's Width?

How to resize the ClipPath area of SVG?

Consider the following scenario:

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

The objective is to expand the clipping shape's dimensions to match the width of the green area.

Solution

Employing the SVG as a mask provides control over its size and placement, similar to background-image. By setting an appropriate value for the viewBox, you can achieve the desired effect:

.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, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">

By modifying the width of the img-container, you can adjust the size of the clipped area effortlessly.

The above is the detailed content of How to Resize an SVG Clip Path to Match the Containing Element's Width?. For more information, please follow other related articles on the PHP Chinese website!