如何调整 SVG 的 ClipPath 区域的大小? [英] How to resize the ClipPath area of SVG?
问题描述
我有这样的代码:
.img-container {宽度:300px;高度:300px;背景颜色:浅绿色;溢出:隐藏;}.clipped-img {剪辑路径:url('#header-clip-svg');}
<!--剪切 SVG--><svg height="0" width="0"><定义><clipPath id="header-clip-svg"><路径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.3,20.8,16.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,10.92,13,10.92-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"</</clipPath></defs></svg><!-- 剪切图像--><img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
我想增加剪裁形状的尺寸,使其具有彩色绿色区域的宽度.有没有办法做到这一点?
您可以将 SVG 应用为 mask
并轻松调整其大小和位置(就像您可以使用 background-image
).只需确保为视图框设置正确的值:
.img-container {宽度:300px;高度:300px;背景颜色:浅绿色;边距:5px;}.clipped-img {宽度:100%;高度:100%;显示:块;适合对象:覆盖;-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-1629.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.24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.24.8,33,15.2,43.3c.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,>9</svg>' )居中/不重复;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><路径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.3,20.8,16.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,10.92,13,10.92-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"</gt;/svg>')居中/不重复;}
<img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg"><div class="img-container" style="width:500px;"><img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
<div class="img-container" style="width:150px;"><img class="clipped-img" src="https://picsum.photos/id/1074/800/800.jpg">
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?
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>
这篇关于如何调整 SVG 的 ClipPath 区域的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!