mask-image SVG <image>与内联SVG mask元素遮罩效果示意实例页面

效果：

下面是原始图：

代码：

CSS代码：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask: url(#mask);
    mask-image: url(#mask);
    /* Firefox外链也支持 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

HTML代码：

<svg>
    <defs>    
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化边缘 -->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 主体遮罩 -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>    
</svg>

<svg width="250" height="186">
    <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186"></image>
</svg>