有没有办法使用 svg (img) 裁剪图像？

【问题标题】：is there any way to use an svg (img) to crop an image?有没有办法使用 svg (img) 裁剪图像？
【发布时间】：2015-01-11 08:05:22
【问题描述】：

据我了解（通过阅读之前在 stackoverflow 上发布的问题）可以使用 svg 坐标裁剪图像，但可以使用 svg 链接裁剪图像吗？例如：<img src="http://imgh.us/face01.svg">

编辑：这就是我的意思：谢谢！

【问题讨论】：

stackoverflow.com/questions/3634663/…

标签： css image svg

【解决方案1】：

是的。您可以使用 mask-image 属性来完成。除 IE 之外的所有浏览器都支持此功能。

.masked {
    -webkit-mask-image: url(http://imgh.us/face01.svg);
    mask-image: url(http://imgh.us/face01.svg);
}

&lt;img src="http://lorempixel.com/400/400" width="400" height="400" class="masked"&gt;

很遗憾，您仍然需要为 IE 做其他安排。

【讨论】：

【解决方案2】：

您可以在 SVG 中使用图像元素结合 SVG 蒙版或 SVG 过滤器来完成这一切，并让它在 IE10+（和所有其他浏览器）上运行。这是过滤器示例：

<svg width="400px" height="400px"> 
<defs>
<filter id="crop-me" x="0%" y="0%">
  <feImage xlink:href="http://imgh.us/face01.svg" result="area"/>
  <feComposite operator="in" in="SourceGraphic" in2="area"/>
</filter>
</defs>
<image filter="url(#crop-me)" xlink:href="http://lorempixel.com/400/400" x="0" y="0" width="200"  height="300"/>

</svg>

【讨论】：