SVG之Clipping and Masking

裁剪(Clipping)

<clipPath>元素用来定义裁剪路径（我更愿意叫裁剪范围，因为<clipPath>内部可以是任何封闭的形状）。需要被裁剪的svg元素，通过style="clip-path:url(#clipPathId)"来指定根据clipPath范围裁剪，超出clipPath封闭形状外的部分将被隐藏。

<defs>
    <clipPath id="clip">
        <path d="m100 100a50 70 0 1 0 100 0Q200 0 170 30Q150 50 130 30Q100 0 100 100"></path>
    </clipPath>
    <linearGradient id="linear" x1="0.3" y1="0.3" x2=".7" y2=".7" spreadMethod="reflect">
        <stop offset="0" stop-color="#00F"></stop>
        <stop offset="1" stop-color="#FF0"></stop>
    </linearGradient>
</defs>
<rect x="0" y="0" height="200" width="200" fill="url(#linear)" style="clip-path: url(#clip)"></rect>

style="clip-path: url(#clip)"可以被用在形状元素和<text>元素上。

<defs>
    <clipPath id="textClip">
        <text x="50" y="30" transform="rotate(45)" style="font-weight: bold">Text Colorful Clip</text>
    </clipPath>
    <linearGradient id="linear" x1="0.3" y1="0.3" x2=".7" y2=".7" spreadMethod="reflect">
        <stop offset="0" stop-color="#00F"></stop>
        <stop offset="1" stop-color="#FF0"></stop>
    </linearGradient>
</defs>
<rect x="0" y="0" height="200" width="200" fill="url(#linear)" style="clip-path: url(#textClip)"></rect>

clipPath也可以通过改变clipPathUnits属性来调整其所在坐标系，属性值默认为userSpaceOnUse，可改为objectBoundingBox，相应内部数值变为百分数。

蒙版(Masking)

简单来说，蒙版可以理解为附加在指定元素上的透明度属性。蒙版透明的区域，指定元素相应的区域就透明，蒙版不透明的区域，指定元素相应的区域就不透明。
说到蒙版的透明度，就不得不说代表色彩空间的r(Red)g(Green)b(Blue)a(Alpha)，红绿蓝还有透明度值都会影响蒙版的透明度。
蒙版透明度的计算公式为：

(0.2125 * red value + 0.7154 * green value + 0.0721 * blue value) * opacity value

其中所有的value值域均为0~1。可以看出蓝色的透明系数最小，即表示蓝色的透明度最弱，相应绿色的透明度最强。
根据上面公式，理论上可以得出，0.2125透明度纯白色和1透明度纯红色的蒙版透明度应该是一样的，其他颜色同理：

<defs>
    <mask id="red" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="#f00"></rect>
    </mask>
    <mask id="green" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="#0f0"></rect>
    </mask>
    <mask id="blue" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="#00f"></rect>
    </mask>
    <mask id="white" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="#fff" opacity="0.7154"></rect>
    </mask>
    <mask id="white2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="rgba(255,255,255,0.2125)"></rect>
    </mask>
    <mask id="white3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" height="1" width="1" fill="rgba(255,255,255,0.0721)"></rect>
    </mask>
</defs>
<image xlink:href="Jellyfish.jpg" x="0" y="0" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#white)"></image>
<image xlink:href="Jellyfish.jpg" x="240" y="0" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#green)"></image>
<image xlink:href="Jellyfish.jpg" x="0" y="210" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#white2)"></image>
<image xlink:href="Jellyfish.jpg" x="240" y="210" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#red)"></image>
<image xlink:href="Jellyfish.jpg" x="0" y="420" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#white3)"></image>
<image xlink:href="Jellyfish.jpg" x="240" y="420" height="200" width="230" preserveAspectRatio="xMidYMid meet" style="mask:url(#blue)"></image>

(透明度方面看起来是差不多，但颜色感觉不太对，照我理解蒙版只影响元素透明度，不会改变颜色的。不知道为啥，留作一个问题)
和pattern类似，mask用maskUnits设置mask本身属性值是百分比数还是实际坐标长度；用maskContentUnits设置mask内部元素的属性值是百分比数还是实际坐标长度。

我们用蒙版做一些其他有趣的事情。

<defs>
    <mask id="cat" x="0" y="0" height="200" width="400" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
        <rect x="0" y="0" width="400" height="200" fill="#fff" opacity="0.5"></rect>
        <path d="m100 100a50 40 0 1 0 100 0Q200 00 170 30Q150 50 130 30Q100 0 100 100" fill="#fff" opacity="1"></path>
    </mask>
</defs>
<image xlink:href="Jellyfish.jpg" x="70" y="0" height="170" width="300" preserveAspectRatio="none" style="mask:url(#cat)"></image>