Home >Web Front-end >CSS Tutorial >How to Resize an SVG Clip Path to Match the Containing Element's Width?

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-14 19:57:11806browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn