如何调整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/

- user3267302

Answer 1

首先，你的示例有误，因为SVG中没有<img>元素。你需要使用<image>元素。

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

<svg id="image-svg" class="clip">
  <image class="main-img" xlink:href="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>

现在我猜想您是希望剪辑路径自动适应图像大小。否则，我猜测您只需将剪辑路径坐标放大即可。

在SVG中，您可以使用objectBoundingBox坐标来实现这一点。当启用objectBoundingBox坐标模式时，坐标将按比例缩放，使得(0,0)表示目标元素的左上角，(1,1)表示目标元素的右下角。在本例中，目标元素是图像。

要在剪辑路径中使用此模式，需要设置clipPathUnits="objectBoundingBox"。然后，您只需要缩放所有多边形坐标值，使其介于0和1之间即可。

#image-svg {
  width: 500px;
  height: 500px;
}
.main-img {
  clip-path: url('#clipPolygon');
  width:90%;
  height: 90%;
}

<svg id="image-svg" class="clip">
  <image class="main-img" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
</svg>

<svg class="clip">
  <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
    <polygon points="0.52 0 1 0.45 0.5 1 0 0.5"></polygon>
  </clipPath>
</svg>

- Paul LeBeau

Answer 2

一种解决方法是使用 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="" />

- Temani Afif

---

是的，我知道它可以工作，但我还需要在IE中找到解决方案，所以我不能在CSS中使用clip-path。 - user3267302

是的，但据我所知它应该可以在IE上运行：https://dev59.com/EmEh5IYBdhLWcg3w5243 - user3267302

@user3267302 如果您尝试将img添加到SVG中并使用我的简化代码，会怎样呢？ - Temani Afif

我的意思是在我的例子中不是 :) 我删掉了SVG来简化代码... 那么你有试过我的剪辑路径在SVG内部放置图像吗？ - Temani Afif