使用svg 遮罩 显示不同形状的图片

第一步 ：拿到要使用的形状svg

<svg xmlns="http://www.w3.org/2000/svg" width="180.418" height="160" viewBox="0 0 180.418 160">
  <path  d="M27.9,100.157,1.6,89.915l23.866-13.38C27.245,33.961,61.593,0,103.707,0c43.25,0,78.312,35.817,78.312,80s-35.061,80-78.312,80C67.272,160,36.648,134.581,27.9,100.157Z" transform="translate(-1.601)"/>
</svg>

把你复制的代码里面 d="" 里面的值复制出来，

M27.9,100.157,1.6,89.915l23.866-13.38C27.245,33.961,61.593,0,103.707,0c43.25,0,78.312,35.817,78.312,80s-35.061,80-78.312,80C67.272,160,36.648,134.581,27.9,100.157Z

粘贴到下面的clipPath d="" 里面

<svg height="" width="">
	<clipPath id="svgPath">
	  <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M27.9,100.157,1.6,89.915l23.866-13.38C27.245,33.961,61.593,0,103.707,0c43.25,0,78.312,35.817,78.312,80s-35.061,80-78.312,80C67.272,160,36.648,134.581,27.9,100.157Z"></path>
	</clipPath>
</svg>

第二步

在你的html里面插入两段代码

<style>
     .pic img{-webkit-clip-path: url(#svgPath); clip-path: url(#svgPath);} 
</style>
<svg >
    <clipPath id="svgPath">
      <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M27.9,100.157,1.6,89.915l23.866-13.38C27.245,33.961,61.593,0,103.707,0c43.25,0,78.312,35.817,78.312,80s-35.061,80-78.312,80C67.272,160,36.648,134.581,27.9,100.157Z"></path>
    </clipPath>
</svg>        
<div class="pic"><img src=""></div>