svg里的clipPath和mask

svg里的clipPath定义了一个区域,在区域内的元素是可见的,区域外是不可见的,同时,区域外的元素无法产生事件.

咱们先看一个简单区域的例子:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" >
    <clipPath id="rectClip">
        <rect x="0" y="10" width="100" height="35" />
    </clipPath>

    <circle cx="50" cy="50" r="50" clip-path="url(#rectClip)" fill="rgb(255,0,0)"/>
</svg>

结果图:

svg里的clipPath还可以用文字的笔画来划区域,从而实现装饰文字,打个比方:

 <clipPath id="textClip">
        <text x="130" y="30" font-size="20px">svg里的裁剪</text>
  </clipPath>
<g clip-path="url(#textClip)" >
        <rect x="120" y="10" width="150" height="80" fill="rgb(255,0,0)" />
        <rect x="120" y="20" width="150" height="80" fill="rgb(0,255,0)" />
 </g>

效果图:

mark与clipPath相似,也是定义一个区域,不同的是,mask画出来的区域是类似一层笼罩,一层蒙版,当mask填充的颜色是白色是,与clipPath的效果相同,当mask填充的颜色是黑色时,蒙版里的元素透明度为0.

根据我个人的理解,mask与clipPath最主要的区别是,clipPath只能定义这个地方能不能看见,而mask除了能定义是不是能看见之外,还可以设置透明度.

mask也可以用多种标签划区域,在下面的例子中,咱们用<path>划一个心形区域:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" >
   <defs>
        <mask id="mask1" maskUnits=" objectBoundingBox" maskContentUnits=" objectBoundingBox">
            <g transform="translate(150 190) scale(1)">
                <path d="M0 -100 C-35 -180 -100 -150 -100 -100 C-100 -50 -25 0 0 100 M0 -100 C35 -180 100 -150
                 100 -100 C100 -50 25 0 0 100" style="fill: #ffffff" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-linecap="round">
                </path>
            </g>
        </mask>
    </defs>
</svg>
<svg class="masked-element" width="300" height="300" viewBox="0 0 300 400" >
    <g transform="translate(-70 -50) scale(1.5)">
        <image xlink:href="eyes.jpg" width="300" height="300"/>
    </g>
</svg>

填充颜色为白色:(透明度为1)

当我们改变填充颜色时,透明度也会相应改变:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" >
   <defs>
        <mask id="mask1" maskUnits=" objectBoundingBox" maskContentUnits=" objectBoundingBox">
            <g transform="translate(150 190) scale(1)">
                <path d="M0 -100 C-35 -180 -100 -150 -100 -100 C-100 -50 -25 0 0 100 M0 -100 C35 -180 100 -150
                 100 -100 C100 -50 25 0 0 100" style="fill: #ff0000" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-linecap="round">
                </path>
            </g>
        </mask>
    </defs>
</svg>
<svg class="masked-element" width="300" height="300" viewBox="0 0 300 400" >
    <g transform="translate(-70 -50) scale(1.5)">
        <image xlink:href="eyes.jpg" width="300" height="300"/>
    </g>
</svg>

效果图:

边框为全透明,可以形成对比