SVG基本使用（三、剪裁/蒙版、漸變色、畫筆、形變、ViewBox）

一、裁剪與蒙版

• 1.clipPath
  只有路徑範圍內的內容會被顯示, 路徑範圍外的內容不會被顯示

• 2.mask
  mask和clipPath差不多
  2.1.裁切路徑是可見與不可見的突變
  2.2.蒙版則是可見與不可見的漸變

• 注意點:
  在指定裁剪和蒙版的時候需要通過url(#id)來指定
  1.圓形在上，矩形在下

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="4df"></rect>
    <circle cx="200" cy="200" r="100" fill="red"></circle>
 </svg>

2.裁剪：將方形中被圓形蓋住的部分裁剪下來。

<svg width="500" height="500">
    <clipPath id="myClip">
        <circle cx="50" cy="50" r="50" fill="red"></circle>
    </clipPath>
    <rect x="0" y="0" width="150" height="100" fill="#4df" clip-path="url(#myClip)"></rect>
 </svg>

3.蒙版：同混合類似，但是蒙版會混合顏色，並有默認透明度

<svg width="500" height="500">
    <mask id="myMask">
        <circle cx="50" cy="50" r="50" fill="red"></circle>
    </mask>
    <rect x="0" y="0" width="150" height="100" fill="#4df" mask="url(#myMask)"></rect>
</svg>

二、漸變色

• 1.線性漸變和徑向漸變
  和Canvas一樣, 在SVG中也可以生成漸變顏色
  線性漸變
  徑向漸變

• 2.漸變屬性
  x1/y1: 漸變範圍開始位置
  x2/y2: 漸變範圍結束位置
  默認情況下x1/y1/x2/y2是當前元素的百分比，注意取值爲百分比
  x1/y1/x2/y2的單位可以通過gradientUnits（單位爲百分比時可以不寫gradientUnits屬性）修改。
  gradientUnits=“objectBoundingBox”:x1/y1/x2/y2的默認值爲百分比
  gradientUnits=“userSpaceOnUse”:修改x1/y1/x2/y2的的單位爲像素

      3.注意點:
      使用漸變顏色需要通過url(#id)格式來使用
  

<svg width="500" height="500">
    <defs>
       <linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
            <!--從0%開始爲一個顏色，到100%結束爲一個顏色-->
            <stop offset="0" stop-color="#1df"></stop>
            <stop offset="1" stop-color="#faf"></stop>
        </linearGradient>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>
</svg>

<svg width="500" height="500">
    <defs>
        <linearGradient id="myColor" x1="100" y1="100" x2="200" y2="200" gradientUnits="userSpaceOnUse">
            <!--從0%開始爲一個顏色，到100%結束爲一個顏色-->
            <stop offset="0" stop-color="#1df"></stop>
            <stop offset="1" stop-color="#faf"></stop>
        </linearGradient>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>
</svg>

三、畫筆

• 1.Pattern(畫筆)
  在SVG中除了可以使用純色和漸變色作爲填充色以外, 還可以使用自定義圖形作爲填充
• 2.Pattern屬性
  width/height默認情況下也是百分比
  可以通過gradientUnits修改
  patternUnits=“objectBoundingBox”
  patternUnits=“userSpaceOnUse”

<svg width="500" height="500">
    <!--使用小圓填滿整個矩形 使用畫筆工具-->
    <defs>
        <!--width="0.2"：300的五分之一
            height="0.2"：200的五分之一（0.2是1的五分之一）
            -->
        <pattern id="myPattern" width="0.2" height="0.2" patternUnits="objectBoundingBox">
            <circle cx="10" cy="10" r="10" fill="#faf"></circle>
        </pattern>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>
</svg>

<svg width="500" height="500">
    <!--使用小圓填滿整個矩形 使用畫筆工具-->
    <defs>
        <!--width="20"：300/20=15個點
          height="20"：200/20=10個點（0.2是1的五分之一）
          -->
        <pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" fill="#faf"></circle>
        </pattern>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>
</svg>

四、形變

和Canvas一樣，改變的是座標系。

• 正常

<rect x="100" y="20" width="300" height="200" fill="#adf"></rect>
<rect x="100" y="250" width="300" height="200" fill="#aef"></rect>

• x軸左移100像素

<rect x="100" y="20" width="300" height="200" fill="#adf"></rect>
<rect x="100" y="250" width="300" height="200" fill="#aef" transform="translate(100, 0)"></rect>

• x軸縮小一半

<rect x="100" y="20" width="300" height="200" fill="#adf"></rect>
<rect x="100" y="250" width="300" height="200" fill="#aef" transform="scale(0.5, 1)"></rect>

• 整個座標系旋轉15度

<rect x="100" y="20" width="300" height="200" fill="#adf"></rect>
<rect x="100" y="250" width="300" height="200" fill="#aef" transform="rotate(15)"></rect>

五、ViewBox

• 0.什麼是可視區域和內容區域
  可視區域：可以直接看到的區域
  內容區域：可以直接看到的區域+滑動可以看到的區域
  

• 1.什麼是ViewBox?
  ViewBox就是可視區域, 用戶能看到的區域。
  默認情況下，可視區域的大小和內容區域（viewProt）大小是一致的
  但是我們也可以手動修改可視區域的大小

• 2.修改可是區域使用ViewBox屬性格式
  viewBox=“x y width height”
  x:修改可視區域x方向位置
  y:修改可視區域y方向位置
  width/height: 修改可視區域尺寸, 近大遠小

• 3.案例

• 3.1.當前的viewBox爲默認值，可視區域的大小和內容區域大小是一致的

<svg width="200" height="200" viewBox="0 0 200 200"><!---->
    <circle cx="100" cy="100" r="50" fill="#dfa"></circle>
</svg>

• 3.2.當前的viewBox的x爲50。表示將可視區域向右平移50像素

<svg width="200" height="200" viewBox="50 0 200 200">
    <circle cx="100" cy="100" r="50" fill="#dfa"></circle>
</svg>

• 3.3.當前的viewBox的y爲50。表示將可視區域向下平移50像素

<svg width="200" height="200" viewBox="0 50 200 200">
    <circle cx="100" cy="100" r="50" fill="#dfa"></circle>
</svg>

• 3.4.當前的viewBox的w/h爲400，可視區域被放大。
  可視區域在原來的寬高基礎上，等比變大爲400，變遠

<svg width="200" height="200" viewBox="0 0 400 400">
    <circle cx="100" cy="100" r="50" fill="#dfa"></circle>
</svg>

• 3.5.當前的viewBox的w/h爲100，可視區域被縮小。
  可視區域在原來的寬高基礎上，等比縮小爲100，變近

</svg>
<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="100" cy="100" r="50" fill="#dfa"></circle>
</svg>

• 3.6.可視區域在原來的寬高基礎上，不等比縮放。
  viewBox的x/y失效。
  原因：
  • 默認情況下如果viewBox的尺寸是等比縮放的, 那麼調整後viewBox區域的xy和內容區域的xy對齊,
  • 但是如果viewBox的尺寸不是等比縮放的, 那麼系統就會調整viewBox的位置, 我們設置的x/y會失效
  • 此時如果需要viewBox的xy和內容區域(viewProt)的xy繼續保持重合, 那麼就需要使用preserveAspectRatio屬性來設置對齊方式

<svg width="200" height="200" viewBox="0 0 50 150">
    <circle cx="50" cy="50" r="50" fill="#4df"></circle>
</svg>

• 3.7 preserveAspectRatio屬性的取值：

  • preserveAspectRatio 第一個參數
    xMin viewport和viewBox左邊對齊
    xMid viewport和viewBox x軸中心對齊
    xMax viewport和viewBox右邊對齊
    YMin viewport和viewBox上邊緣對齊。注意Y是大寫。
    YMid viewport和viewBox y軸中心點對齊。注意Y是大寫。
    YMax viewport和viewBox下邊緣對齊。注意Y是大寫。

  • preserveAspectRatio 第二個參數
    meet 保持縱橫比縮放viewBox適應viewport，受
    slice 保持縱橫比同時比例小的方向放大填滿viewport，攻
    none 扭曲縱橫比以充分適應viewport，變態

<svg width="200" height="200" viewBox="0 0 50 150" preserveAspectRatio="xMinYMin">
    <circle cx="50" cy="50" r="50" fill="#4df"></circle>
</svg>