如何从图像中剪切圆形部分? [英] How to cut a circular part from an image?
本文介绍了如何从图像中剪切圆形部分?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 SVG 路径剪辑我的图像,但我的图像似乎不太适合.
这就是我想要实现的目标:
这就是我得到的:
这是我试过的代码:
.topbar-chat-img {宽度:48px;高度:48px;适合对象:覆盖;剪辑路径:网址(#topbar-img-svg);}
<img src="https://picsum.photos/200/200?image=1069" class="topbar-chat-img"/>
我也试图改变 vievBox 和 svg 的大小,但我无法适应图像.
解决方案
这是另一种更简单的 SVG 方法:
body {背景:粉红色;}
您也可以使用 CSS 和掩码来做到这一点:
body {背景:粉红色;}图片{边界半径:50%;-webkit-mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);}
<img src="https://picsum.photos/200/200?image=1069" >
预>
另一种可以轻松调整圆圈位置的语法:
body {背景:粉红色;}图片{边界半径:50%;填充:1px;-webkit-掩码:线性梯度(#fff,#fff),径向渐变(最远侧,#fff 98%,透明 100%)底部 -30px 右侧 -30px/100px 100px 不重复;-webkit-mask-composite:source-out;面具:线性梯度(#fff,#fff),径向渐变(最远侧,#fff 98%,透明 100%)底部 -30px 右侧 -30px/100px 100px 不重复;面具复合:排除;过渡:1s;}图像:悬停{-webkit-mask-position:top -30px 右 -30px;掩码位置:顶部 -30px 右侧 -30px;}
<img src="https://picsum.photos/200/200?image=1069" >
预>
I am trying to clip my image with an SVG path but my image doesn't seem to fit in well.
This is what I am trying to achieve:
And this is what i am getting:
This is the code I've tried:
.topbar-chat-img {
width: 48px;
height: 48px;
object-fit: cover;
clip-path: url(#topbar-img-svg);
}
<img src="https://picsum.photos/200/200?image=1069" class="topbar-chat-img" />
<svg>
<defs>
<clipPath id="topbar-img-svg">
<path class="svg-cls" d="M33,66A33.009,33.009,0,0,1,20.155,2.593,32.99,32.99,0,0,1,66,33a32.691,32.691,0,0,1-3.271,14.341,11.008,11.008,0,0,0-13.148,14.2A32.978,32.978,0,0,1,33,66Z"/>
</clipPath>
</defs>
</svg>
I was also trying to change vievBox and size of svg but i couldn't fit the image.
解决方案
Here is another easier way to do with SVG:
body {
background:pink;
}
<svg width="200" height="200">
<defs>
<mask id="hole">
<circle r="100" cx="100" cy="100" fill="white"/>
<circle r="50" cx="180" cy="180" fill="black"/>
</mask>
<pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
<image xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
</pattern>
</defs>
<!-- create a rect, fill it with the image and apply the above mask -->
<rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>
You can also do this using CSS and mask:
body {
background:pink;
}
img {
border-radius:50%;
-webkit-mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);
mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);
}
<img src="https://picsum.photos/200/200?image=1069" >
Another syntax where you can easily adjust the position of the circle:
body {
background:pink;
}
img {
border-radius:50%;
padding:1px;
-webkit-mask:
linear-gradient(#fff,#fff),
radial-gradient(farthest-side,#fff 98%,transparent 100%)
bottom -30px right -30px/
100px 100px no-repeat;
-webkit-mask-composite:source-out;
mask:
linear-gradient(#fff,#fff),
radial-gradient(farthest-side,#fff 98%,transparent 100%)
bottom -30px right -30px/
100px 100px no-repeat;
mask-composite:exclude;
transition:1s;
}
img:hover {
-webkit-mask-position:top -30px right -30px;
mask-position:top -30px right -30px;
}
<img src="https://picsum.photos/200/200?image=1069" >
这篇关于如何从图像中剪切圆形部分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文