html - 如何将 SVG 剪辑路径调整为与图像大小相同

Question

我在调整我的 svg 剪辑路径大小以适应图像大小时遇到​​了一些问题。

我有这样的代码:

<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:

#image-svg {
  left:0;
  top:0;
}
.main-img {
  clip-path: url('#clipPolygon');
  width:90%;
}

一切正常，除了剪辑路径比图像本身小得多。如何解决这个问题？这是我的工作 fiddle :

https://jsfiddle.net/7egbccpw/

Answer 1

一种解决方案是直接使用 CSS 指定路径并使用 % 作为值

.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="" />