Question

据我所知（通过阅读之前发布的关于stackoverflow的问题）可以使用svg coorindates裁剪图像，但是可以使用svg链接裁剪图像吗？例如：<img src="http://imgh.us/face01.svg">

编辑：这就是我的意思： http://i58.tinypic.com/2ms328m.png 谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

<img src="http://lorempixel.com/400/400" width="400" height="400" class="masked">

＆＃13;

不幸的是，您仍然需要为IE做出其他安排。

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

有没有办法使用svg（图像）来裁剪图像？

2 个答案: