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>