CSS代码:
.mask-image {
width: 250px; height: 187.5px;
-webkit-mask-image: 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>
<img src="ps1.jpg" class="mask-image">