如何将SVG剪切路径调整为与图像相同的大小 [英] How to resize SVG clip-path to be same size as image

问题描述

我调整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屋！