CSS mask-image属性详细介绍(小结)

.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); */
}

<svg>
    <defs>   
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化边缘 www.xttblog.com-->
            <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>