o'Reill的SVG精髓（第二版）學習筆記——第十章

10.1 裁剪路徑

建立SVG文檔時，能夠經過制定感興趣區域的寬度和高度創建視口。這會變成默認的裁剪區域，任何繪製在該範圍外部的部分都不會顯示。你也可使用<clipPath>元素來創建本身的裁剪區域。

最簡單的情形是創建一個矩形裁剪路徑。在<clipPath>元素內是想要裁剪的<rect>。由於咱們只想要它的座標，因此這個矩形自己不顯示。能夠在<clipPath>元素內隨意指定填充和筆畫風格。應用時在要裁剪的對象上添加clip-path樣式屬性，值引用到<clipPath>元素便可。注意這個屬性帶有連字符且不是大寫的，裁剪元素則是有大寫字母且不帶連字符。

裁剪矩形路徑：

http://oreillymedia.github.io/svg-essentials-examples/ch10/clip_path.html

 

<clipPath>，顧名思義，應該可讓咱們指定任意形式的路徑用於裁剪。事實上<clipPath>元素也能夠包含任意數量的基本形狀，<path>元素或者<text>元素，下例展現了一組按照曲線路徑裁剪的形狀和同一組根據文本裁剪的形狀

http://oreillymedia.github.io/svg-essentials-examples/ch10/complex_clip_path.html

　　<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
       <defs>
           <clipPath id="curveClip">
               <path id="curve1" d="M5 55 C 25 5,45 -25,75 55,85 85,20 105,40 55 Z" style="stroke: black;fill:none;">
           </clipPath>
           <clipPath id="textClip">
               <text id="text1" x="20" y="20" transform="rotate(60)" style="font-family: 'Liberation Sans';font-size:48pt;stroke:black;fill:none;">
                   CLIP
               </text>
           </clipPath>
           <g id="shapes">
               <rect x="0" y="50" width="90" height="60" style="fill:#999;"/>
               <circle cx="25" cy="25" r="25" style="fill:#666;"/>
            <polygon points="30 0 80 0 80 100" style="fill:#ccc;"/>
           </g>
       </defs>
       <!-- 繪製曲線裁剪路徑 -->
       <use xlink:href="#shapes" style="clip-path:url(#curveClip);" />

       <!-- 繪製文本裁剪路徑 -->
       <use transform="translate(100,0)" xlink:href="#shapes" style="clip-path:url(#textClip);" />

       <g transform="translate(0,150)">
           <use xlink:href="#shapes" />
           <use xlink:href="#curve1" />
       </g>

    <g transform="translate(100,150)">
        <use xlink:href="#shapes" />
        <use xlink:href="#text1">
    </g>
    </svg>

上例的裁剪路徑座標被指定爲用戶座標。若是想根據對象的邊界框來表示座標，設置clipPathUnits爲objectBoundingBox便可（默認值爲userSpaceOnUse）。下例使用路徑裁剪在任意對象上生成一個圓形或者橢圓窗口。

<!-- 應用objectBoundingBox的clipPathUnits -->
    <svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <clipPath id="circularPath" clipPathUnits="objectBoundingBox">
                <circle cx="0.5" cy="0.5" r="0.5" />
            </clipPath>

            <g id="shapes">
                <rect x="0" y="50" width="100" height="50" style="fill:#999;"/>
                <circle cx="25" cy="25" r="25" style="fill:#666;"/>
                <polygon points="30 0 80 0 80 100" style="fill:#ccc;" />
            </g>
            <g id="words">
                <text x="0" y="19" style="font-family: 'Liberation Sans';font-size:14pt;">
                    <tspan x="0" y="19">if you have form'd a circle</tspan>
                    <tspan x="12" y="35">to go into</tspan>
                    <tspan x="0" y="51">Go into if yourself</tspan>
                    <tspan x="12" y="67">and see how you would dou.</tspan>
                    <tspan x="50" y="87">&#8212;William Blake</tspan>
                </text>
            </g>
        </defs>
        <use xlink:href="#shapes" style="clip-path:url(#circularPath);"/>
        <use xlink:href="#words" transform="translate(110,0)" style="clip-path:url(#circularPath);">
    </svg>

<marker>、<symbol>和<svg>元素都會定義其自身的視口，也可使用overflow:hidden樣式來裁剪視口內容。然而，若是內容的meet設置爲preserveAspectRatio，視口可能比viewBox更大。要裁剪這個viewBox，就要建立一個<clipPath>元素，其中包含一個匹配viewBox最小x、最小y、寬度和高度的矩形。

 

10.2蒙版

SVG蒙版會變換對象的透明度。若是蒙版是不透明的，被蒙版覆蓋的對象的像素就是不透明的；若是蒙版是半透明的，那麼對象就是半透明的，蒙版的透明部分會使被覆蓋對象的相應部分不可見。

咱們用<mask>元素來建立蒙版。使用x、y、width和height屬性指定蒙版的尺寸。這些尺寸默認按照objectBoundingBox計算。若是想根據用戶控件座標計算尺寸，設置naskUnits爲userSpaceOnUse便可。

起始<mask>和結束</mask>標記之間使咱們想要用做蒙版的任意基本形狀、文本、圖像或者路徑。這些元素的座標默認使用用戶座標控件表達。若是想要爲蒙版內容使用對象邊界框，設置maskContentUnits爲objectBoundingBox便可（默認爲userSpaceOnUse）。

SVG如何確認蒙版的透明度？即阿爾法的值。咱們知道，每一個像素由4個值描述，分別是紅、綠、藍顏色值和不透明度。

SVG使用以下公式：

（0.0125*red value + 0.7154 * green value +0.0721 * blue value）*opacity value

全部的值都是0到1之間的浮點數。

下例中，建立了黑色文本和黑色圓形，圓形由徹底不透明的紅、綠、藍和白色正方形遮罩。文本和圓形被組合在一塊兒，而且這個組合使用mask樣式屬性引用了對應的蒙版。背景中的水平黃色條演示了文本和圓形都是半透明的。

 

<!-- 不透明的顏色蒙版 -->
    <svg width="500px" height="500px" viewBox="0 0 500 500">
        <defs>
            <mask id="redmask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill:#f00;"/>
            </mask>

            <mask id="greenmask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill:#0f0;"/>
            </mask>

            <mask id="bluemask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill:#00f;"/>
            </mask>

            <mask id="whitemask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill:#fff;"/>
            </mask>
        </defs>

        <!-- 顯示顏色以演示相對亮度 -->
        <rect x="10" y="10" width="50" height="50" style="fill:#f00;"/>
        <rect x="70" y="10" width="50" height="50" style="fill:#0f0;"/>
        <rect x="130" y="10" width="50" height="50" style="fill:#00f;"/>
        <rect x="190" y="10" width="50" height="50" style="fill:#fff;stroke:black;"/>
        
        <!-- 用於演示透明度的背景內容 -->
        <rect x="10" y="72" width="250" height="5" style="fill:yellow;" />
        <rect x="10" y="112" width="250" height="5" style="fill:yellow;" />
        
        <g style="mask:url(#redmask);font-size: 14pt;text-anchor: middle;">
            <circle cx="35" cy="115" r="25" style="fill:black;"/>
            <text x="25" y="80">Red</text>
        </g>
        <g style="mask:url(#greenmask);font-size: 14pt;text-anchor: middle;">
            <circle cx="95" cy="115" r="25" style="fill:black;"/>
            <text x="95" y="80">Green</text>
        </g>
        <g style="mask:url(#bluemask);font-size: 14pt;text-anchor: middle;">
            <circle cx="155" cy="115" r="25" style="fill:black;"/>
            <text x="155" y="80">Blue</text>
        </g>
        <g style="mask:url(#whitemask);font-size: 14pt;text-anchor: middle;">
            <circle cx="215" cy="115" r="25" style="fill:black;"/>
            <text x="215" y="80">White</text>
        </g>
    </svg>

顏色、透明度和最終阿爾法值之間的關係並不直觀，若是使用白色填充或者使用白色給遮罩內容描邊，則上面公式中前半部分「顏色因子」結果爲1，此時不透明度則是控制蒙版阿爾法值的惟一因素。

http://oreillymedia.github.io/svg-essentials-examples/ch10/alpha_opacity_mask.html

<!-- 只使用不透明度的蒙版阿爾法值 -->
    <svg width="500px" height="500px" viewBox="0 0 500 500">
        <defs>
            <mask id="fullmask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill-opacity:1.0;fill:white;" />
            </mask>
            <mask id="three-fourths" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill-opacity:0.75;fill:white;" />
            </mask>
            <mask id="one-half" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill-opacity:0.5;fill:white;" />
            </mask>
            <mask id="one-fourth" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill-opacity:0.25;fill:white;" />
            </mask>
        </defs>
        <g style="font-size: 14pt;text-anchor: middle;fill:black;">
            <g style="mask:url(#fullmask);">
                <circle cx="35" cy="35" r="25" />
                <text x="35" y="80">100%</text>
            </g>
            <g style="mask:url(#three-fourths);">
                <circle cx="95" cy="35" r="25" />
                <text x="95" y="80">75%</text>
            </g>
            <g style="mask:url(#one-half);">
                <circle cx="155" cy="35" r="25" />
                <text x="155" y="80">50%</text>
            </g>
            <g style="mask:url(#one-fourth);">
                <circle cx="215" cy="35" r="25" />
                <text x="215" y="80">25%</text>
            </g>
        </g>
    </svg>

10.3 案例學習：爲圖形應用蒙版。

<!-- 圖形內未應用蒙版的<image> -->
    <svg width="500px" height="500px" viewBox="0 0 500 500">
        <defs>
            <font-face font-family="bakbatn">
                <font-face-url xlink:href="kfont.svg#kfont-defn"/>
            </font-face>
        </defs>
        <!-- 繪製橢圓和文本 -->
        <use xlink:href="kwanghwamun.jpg" x="72" y="92" width="160" height="120" />
    </svg>

解決方案是讓照片的邊緣淡出，使用徑向漸變做爲蒙版。下面代碼添加到<defs>部分

　　　　　　　<radialGradient id="fade">
                <stop offset="0%" style="stop-color:white;stop-opacity:1.0" />
                <stop offset="85%" style="stop-color:white;stop-opacity:0.5" />
                <stop offset="100%" style="stop-color:white;stop-opacity:0.0" />
            </radialGradient>
            <mask id="fademask" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" style="fill:url(#fade);" / >
            </mask>

而後給<image>標記添加一個蒙版引用：

<image xlink:href="kwanghwamun.jpg" x="72" y="92" width="160" height="120" style="mask:url(#fademask);"/>