如何将 SVG 剪辑路径的大小调整为与图像相同的大小答案

【问题标题】：How to resize SVG clip-path to be same size as image如何将 SVG 剪辑路径的大小调整为与图像相同的大小
【发布时间】：2018-06-17 13:14:30
【问题描述】：

我在调整我的 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%;
}

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

https://jsfiddle.net/7egbccpw/

【问题讨论】：

标签： html css svg clip-path

【解决方案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="" />

【讨论】：

是的，我知道它可以工作，但我也需要 IE 的解决方案，所以我不能在 CSS 中使用剪辑路径
是的，但据我所知它应该在 IE 中工作：stackoverflow.com/questions/21904672/…
@user3267302 如果你通过在 SVG 中添加 img 来尝试我的代码 .. 因为我简化了代码
我的意思是在我的例子中不是 :) 我删除了 SVG 以简化代码......所以你有没有尝试我的剪辑路径与 SVG 中的图像

【解决方案2】：

首先，您的示例已损坏，因为 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>

【讨论】：