外链SVG元素中的mask元素的遮罩效果实例页面

展示

<img>图像

<svg>图像

//zxx: 仅Firefox浏览器都支持

代码

HTML：

<h4>&lt;img&gt;图像</h4>
<img src="1.jpg" class="mask-image" width="256" height="192">

<h4>&lt;svg&gt;图像</h4>
<svg width="256" height="192">
    <image xlink:href="1.jpg" class="mask-image" width="256" height="192"></image>
</svg>

CSS：

.mask-image {
    -webkit-mask-image: url(ellipse-rect.svg#mask);
    mask: url(ellipse-rect.svg#mask);
    mask-image: url(ellipse-rect.svg#mask);
}