如何使用SVG将clipPath设置为图案？问题求助

问题根源 #

你原来用<clipPath>的思路行不通——clipPath只识别元素的几何轮廓，不管给元素填充什么图案、渐变，它只会把元素的形状范围作为裁剪区域，所以图案完全起不了作用。要实现图案样式的遮罩，得用<mask>元素，它支持基于像素透明度的遮罩，填充的图案、渐变都会生效。

修正后的代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">  

    <pattern id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">   
        <!-- 给矩形填充黑色，mask里黑色区域会显示图片，透明区域隐藏 -->
        <rect x="0" y="0" width="10" height="10" fill="black"/>
        <rect x="10" y="10" width="10" height="10" fill="black"/>
    </pattern> 

    <!-- 把clipPath换成mask -->
    <mask id="msk1">
        <!-- 用图案填充圆形，这个填充效果会作为遮罩规则 -->
        <circle fill="url(#cube)" cx="50%" cy="50%" r="200" /> 
    </mask>    

    <!-- 把clip-path属性换成mask -->
    <image xlink:href="wave.jpg" width="100%" height="100%" mask="url(#msk1)"/> 
</svg>    

关键说明 #

• <mask>的遮罩规则：白色（或不透明色）区域会显示下方的图片，黑色（或透明色）区域会隐藏图片，灰色则会让图片半透明显示。
• 如果你想实现反向遮罩（图案区域隐藏图片，其他地方显示），可以把pattern里的矩形填充改成白色，同时给mask里的圆形添加fill="white"，再把pattern的背景设为黑色。
• 注意给<image>加上width="100%"，避免图片只显示一部分。

内容的提问来源于stack exchange，提问作者Tesla Fake