How to Resize Svg Clip-Path

How to resize SVG clip-path?

Firts, when you set the width and height attributes to 100, it makes the svg 100px high and wide. If you want the svg to be full width, you need to give it 100% width.

Second, as commented by @Paulie_D you need to give a value to the viewbox attribute to provide a scale and coordinate system for the elements in your svg. Here is an example with viewbox="0 0 500 500" and width="30%" :

<svg viewbox="0 0 500 500" width="30%" >  <defs>    <clipPath id="svgPath">      <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" />      <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" />      <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" />      <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" />    </clipPath>  </defs>  <image xlink:href="http://i.stack.imgur.com/3DR2G.jpg" x="0" y="0" height="500" width="500" style="clip-path: url(#svgPath);"/></svg>

SVG scaling and clip path

To scale a clip path to fit the element that you are applying it to you need to add clipPathUnits="objectBoundingBox" to your clippath element.

Here is a JsFiddle based on your example demonstrating how to do this.

<svg width="0" height="0" >
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<circle r="0.05" cy="0.0625" cx="0.1625" />
<circle r="0.09322" cy="0.29375" cx="0.2424" />
<!-- rest of path here-->
</clipPath>
</defs>
</svg>
<div class="content centered">
<div class="clipped"></div>
</div>

The catcher is that the units of the path need to be decimal numbers between 0 and 1; these represent fractions of the corresponding element's width or height.

How can I scale clip-path area in CSS?

You can apply scale to the path:

#clipped {  width: 300px;  height: 300px;  background-color: #f00;  -webkit-clip-path: url(#test);          clip-path: url(#test);}
<div id="clipped"></div>
<svg width="0" height="0"> <defs> <clipPath id="test"> <path transform=scale(1.5) d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/> </clipPath> </defs> </svg>

How to resize SVG clip-path to be same size as image

A solution is to specify the path directly with CSS and use % for the values

.main-img {  clip-path: polygon(50% 0%, 100% 45%, 50% 100%, 0 50%);}
<img class="main-img" src="https://lorempixel.com/200/200/" alt="Sample Image" /><img class="main-img" src="https://lorempixel.com/100/100/" alt="Sample Image" /><img class="main-img" src="https://lorempixel.com/50/50/" alt="Sample Image" />

How to resize the ClipPath area of SVG?

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">
</div>

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

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

Svg clip path resizing according to viewport

In this case the solution is using clipPathUnits="objectBoundingBox"

The clipPathUnits attribute indicates which coordinate system to use for the contents of the <clipPath> element.

objectBoundingBox indicates that all coordinates inside the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

Read about clipPathUnits

Since the object bounding box is considered to have a length of 1 unit you will need to scale the path: transform="scale(0.00086)". The width of the bounding box of the path is 1159. 1/1159 = 0.00086.

I've commented out the circle since in this case is not doing anything.

*{margin:0;padding:0}
.slider-image {
width:100%;
clip-path: url(#clip);
-webkit-clip-path: url(#clip);
}
<div>
<img class="w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00086)" d="M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill="url(#paint0_linear)"/>
<!--<circle transform="scale(0.00086)" cx="350" cy="168" r="80"/>-->
</clipPath>
</defs>
</svg>
</div>

SVG clipping path scaling

Turns out the solution was the simple case of adjusting the scale from 0.01 to 0.001!

Updated working codepen

<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url("#clipPolygon");" class="moving">
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox" transform="scale(0.001)">
<polygon id="poly1" points="317 543,966 254,964 -6,610 -5">
<animate id="poly1Anim" attributeName="points" dur="500ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>

how to scale `clip-path: path`?

You can use another svg and add clipPathUnits="objectBoundingBox" to it

More info here

.canvas {
width: 200px;
height: 200px;
background-color: black;
}

.clip {
width: 100%;
height: 100%;
background-color: orange;
clip-path: url(#path);
}
<svg height="0" width="0">
<defs>
<clipPath id="path" clipPathUnits="objectBoundingBox">
<path d="M 0,0.5
Q 0.50,0.15 1,0.50
Q 0.50,0.85 0,0.50">
</path>
</clipPath>
</defs>
</svg>
<div class="canvas">
<div class="clip">sadf</div>
</div>

Scale SVG clipping mask without scaling the clipped element

Put the svg after the div and scale the path instead of itself.

.red {
clip-path: url(#myClip);
width: 300px;
height: 300px;
background-color: red;
/*background-image: url(./img/project.jpg);*/
background-size: cover;
position: absolute;
}

svg path {
transform-box: fill-box;
transform-origin: center;
}

.red:hover~svg path {
transform: scale(1.5);
}
<div href="test.html" class="red">
<h1>Content Content</h1>
<h1>Content Content</h1>
<h1>Content Content</h1>
</div>

<svg height="0" width="0">
<clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.003)" >
<path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"/>
</clipPath>
</svg>


Related Topics



Leave a reply



Submit