如何将SVG剪切路径调整为与图像相同的大小 [英] How to resize SVG clip-path to be same size as image
本文介绍了如何将SVG剪切路径调整为与图像相同的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我调整svg剪切路径的大小以适应图像大小几乎没有问题.
I've got little problem resizing my svg clip-path to fit the image size.
我有这样的代码:
<svg id="image-svg" class="clip">
<img class="main-img" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
</svg>
<svg class="clip">
<clipPath id="clipPolygon">
<polygon points="52 0,100 45,50 100,0 50">
</polygon>
</clipPath>
</svg>
然后我正在使用像这样的css:
And then i'm using css like this:
#image-svg {
left:0;
top:0;
}
.main-img {
clip-path: url('#clipPolygon');
width:90%;
}
一切正常,只是剪切路径比图像本身小得多.如何解决这个问题?这是我的工作小提琴:
Everything works fine, except the clip-path is much smaller then image itself. How to fix this? Here is my working fiddle:
https://jsfiddle.net/7egbccpw/
推荐答案
一种解决方案是直接使用CSS指定路径,并将%用作值
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="" />
<img class="main-img" src="https://lorempixel.com/100/100/" alt="" />
<img class="main-img" src="https://lorempixel.com/50/50/" alt="" />
这篇关于如何将SVG剪切路径调整为与图像相同的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文