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&