SVG-基礎

一、SVG概念

什麼是SVG?
SVG英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖
位圖和矢量圖
在計算機中有兩種圖形, 一種是位圖, 一種是矢量圖

2.1位圖:
傳統的 jpg / png / gif 圖都是位圖
位圖是一個個很小的顏色小方塊組合在一起的圖片;一個小方塊代表1px。

2.2位圖的優點和缺點:
優點: 色彩豐富逼真
缺點: 放大後會失真, 體積大

2.3矢量圖
矢量圖是用XML格式定義, 通過各種「路徑」和「填充顏色」來描述渲染的的圖片

2.4矢量圖優點和缺點:
優點: 放大後不會失真, 體積小
缺點: 不易製作色彩變化太多的圖象

注意點

和canvas一樣, svg也有默認的寬高, 並且默認的寬高和canvas都是一樣的
默認的寬度是300px, 默認的高度是150px
和canvas不一樣的是, svg可以通過css設置寬高, 也可以通過行內的屬性來設置寬高

SVG常見的四種使用方式

1.內嵌到HTML中(直接在HTML中繪製)

2.通過瀏覽器直接打開SVG文件

注意點:
如果需要將svg保存到一個單獨的文件中, 並且需要通過瀏覽器直接打開, 那麼就必須給svg添加一個屬性
xmlns=“http://www.w3.org/2000/svg”

3.在HTML的img標籤中引用

4.作爲CSS背景使用

二、SVG繪製矩形

x / y: 指定繪製的位置
width/height: 指定繪製的大小
fill: 修改填充的顏色
stroke: 修改描邊的顏色
stroke-width: 修改描邊的寬度
rx / ry: 設置圓角的半徑

<head>
    <meta charset="UTF-8">
    <title>03-SVG繪製矩形</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        svg{
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<svg width="500" height="500">

<rect x="100" y="100" width="100" height="100" fill="blue"  rx="10" ry="10"></rect>

</svg>
</body>

三、SVG繪製圓和橢圓

cx/cy: 圓繪製的位置(圓心的位置)
r: 圓的半徑

<circle cx="100" cy="100" r="50"></circle>

cx/cy: 橢圓繪製的位置(圓心的位置)
rx: 水平方向的半徑
ry: 垂直方向的半徑

<ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>

四、SVG繪製直線和折線

繪製直線
x1 / y1: 設置起點
x2 / y2: 設置終點

<line x1="100" y1="100" x2="300" y2="100" stroke="#000"></line>

繪製折線
points: 設置所有的點, 兩兩一對

<polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>

繪製多邊形
polygon 和 polyline 差不多, 只不過會自動關閉路徑

<polygon points="100 100 300 100 300 300" stroke="#000" fill="none"></polygon>

五、SVG常見屬性

fill: 修改填充顏色
fill-opacity: 0~1 設置填充顏色的透明度
stroke: 修改描邊顏色
stroke-width: 修改描邊寬度
stroke-opacity: 0~1 設置描邊透明度
stroke-linecap: butt/square/round 設置線段兩端帽子
stroke-dasharray: 設置虛線
stroke-dashoffset: 設置虛線偏移位
stroke-linejoin: miter/bevel/round 設置折線轉角樣式

注意點:
在SVG中這些所有的常用屬性都是可以直接在CSS中使用的;

<polyline points="100 100 300 100 300 300" stroke="red" stroke-width="10" fill="none" stroke-linejoin="round"></polyline>

六、SVG繪製路徑

1.什麼是SVG路徑
SVG路徑是一個比較牛X的東西, 可以繪製任意圖形, 只不過比較複雜而已;
M = moveto 起點
L = lineto 其它點
H = horizontal lineto 和上一個點Y相等
V = vertical lineto 和上一個點X相等
Z = closepath 關閉當前路徑

S = smooth curveto
S(x2, y2, x, y) 從當前位置光滑的繪製三次貝塞爾曲線到指定位置

T = smooth quadratic Bézier curveto
T(x, y) 從當前位置光滑的繪製二次貝塞爾曲線到指定位置

<path d="M 100 100 H 300 V 300 Z" stroke="red" fill="none" stroke-width="10"></path>

2.路徑指令注意點：
大寫字母是絕對定位, 小寫字母是相對定位
絕對定位: 寫什麼位置就是什麼位置
相對定位: 相對上一次的位置, 在上一次位置基礎上做調整

<path d="M 100 100 l 300 100" stroke="red" stroke-width="10"></path>

七、SVG繪製圓弧

A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 從當前位置繪製弧線到指定位置
rx (radiux-x): 弧線X半徑
ry (radiux-y): 弧線Y半徑
xr (xAxis-rotation): 弧線所在橢圓旋轉角度
laf(large-arc-flag): 是否選擇弧長較長的那一段；// laf=1 ; 選擇較長的那段
sf (sweep-flag): 是否順時針繪製；// sf=1; 選擇順時針
x, y: 弧的終點位置

<path d="M 100 400 A 100 50 90 1 1 200 450" stroke="red" fill="none"></path>

八、SVG繪製貝塞爾曲線

Q = quadratic Bézier curve
Q(x1, y1, x, y) 從當前位置繪製二次貝塞爾曲線到指定位置
x1,y1: 控制點位置
x,y: 終點位置

C = curveto
C(x1, y1, x2, y2, x, y) 從當前位置繪製三次貝塞爾曲線到指定位置
x1, y1: 控制點1位置
x2, y2: 控制點2位置
x, y: 終點位置

<path d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>

<path d="M100 100 C 100 50 200 50 200 100" stroke="red" fill="none"></path>

九、SVG文本繪製

和canvas一樣, 是以左下角作爲參考
和canvas一樣, 默認是文字的基線和指定的位置對齊

x / y: 指定繪製位置
style: 設置文字樣式 (大小/字體等)
text-anchor: 指定文字水平方向對齊方式
dominant-baseline: 指定文字垂直方向對齊方式
dx / dy: 相對於前一個文字位置, 未設置位置的文字會繼承前一個文字

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" text-anchor="middle">知播漁教育</text>

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" dominant-baseline="text-before-edge">知播漁教育</text>

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" dx="10 20 30">知播漁教育</text>

<text fill="yellow">
       
   <tspan x="100" y="100">知知知知</tspan>
   <tspan x="100" y="150">播播播播</tspan>
   <tspan x="100" y="200">漁漁漁漁</tspan>
 </text>

十、SVG繪製路徑文本

總結:
1.定義一個路徑
2.告訴文本需要按照哪個路徑來繪製

注意點:
如果是繪製路徑文本, 那麼超出路徑範圍的內容不會被繪製出來

<defs>
    <!--用defs標籤包裹起來，這條路經就不會顯示-->
    <path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    
</defs>
    
<text>
    <textPath xlink:href="#myPath">知播漁教育(http://www.it666.com)</textPath>
</text>

十一、SVG繪製超鏈接

可以給任意內容添加超鏈接, 只需要用超鏈接包裹起來即可
xlink:href: 指定鏈接地址
xlink:title: 指定鏈接提示
target: 指定打開方式

<a xlink:href="http://www.it666.com" xlink:title="官網" target="_blank">
     <!--<text x="100" y="100">知播漁</text>-->
     <circle cx="100" cy="100" r="100" fill="red"></circle>
 </a>

十二、SVG繪製圖片

注意點:
默認情況下我們的指定的圖片多大就繪製多大

注意點: 當設置的尺寸和圖片實際尺寸不一樣時
高度填滿, 寬度等比拉伸

 <!--<image xlink:href="images/lnj.jpg" width="300" height="300"></image>-->
 
 <image xlink:href="images/lnj.jpg" x="100" y="100"></image>

十三、SVG結構元素

1.g結構元素
g 是group的縮寫, 可以將多個元素放到一個g標記中, 這樣就組成了一個組,
以便統一操作，比如旋轉，縮放或者添加相關樣式等
對g標記設置的所有樣式都會應用到這一組所有的元素中

2.use
g 結構元素封裝的圖形還可以通過<use>元素進行復制使用
<use xlink:href=""/>

3.defs
g 封裝的元素默認是可見的, 如果僅僅是需要定義一組模板, 將來需要用到時候才顯示, 那麼就可以使用 defs

4.symbol
symbol兼具<g>的分組功能和<defs>初始不可見的特性；
symbol能夠創建自己的視窗，所以能夠應用viewBox和preserveAspectRatio屬性。

 <symbol>
        <g id="myGroup">
            <circle cx="100" cy="100" r="100"></circle>
            <circle cx="100" cy="200" r="50"></circle>
            <circle cx="100" cy="300" r="30"></circle>
        </g>
 </symbol>
 
 <use xlink:href="#myGroup" x="0" fill="blue"></use>
 <use xlink:href="#myGroup" x="300" fill="red"></use>

十四、SVG裁剪和蒙版

clipPath
只有路徑範圍內的內容會被顯示, 路徑範圍外的內容不會被顯示；
mask
mask和clipPath差不多
2.1.裁切路徑是可見與不可見的突變
2.2.蒙版則是可見與不可見的漸變
注意點：在指定裁剪和蒙版的時候需要通過 url(#id) 來指定；

<clipPath id="myClip">
    <circle cx="200" cy="200" r="100" fill="red"></circle>
</clipPath>

<rect x="100" y="100" width="300" height="200" fill="blue" clip-path="url(#myClip)"></rect>


<mask id="myMask">
    <circle cx="200" cy="200" r="100" fill="rgba(255, 0, 0, 0.5)"></circle>
</mask>

<rect x="100" y="100" width="300" height="200" fill="blue" mask="url(#myMask)"></rect>

十五、SVG漸變

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

<linearGradient></linearGradient> 線性漸變
<radialGradient></radialGradient> 徑向漸變

2.漸變屬性
x1/y1: 漸變範圍開始位置
x2/y2: 漸變範圍結束位置
默認情況下x1 /y1 /x2 /y2是當前元素的百分比，可以通過gradientUnits修改；
gradientUnits = “objectBoundingBox”
gradientUnits = “userSpaceOnUse”

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

 <defs>    
   <!--<linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1">-->
   <!--<linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">-->
   
   <linearGradient id="myColor" x1="100" y1="100" x2="400" y2="100" gradientUnits="userSpaceOnUse">
        <!--從0%開始爲紅色-->
        <stop offset="0" stop-color="red"></stop>
            
        <!--到100%爲藍色-->
        <stop offset="1" stop-color="blue"></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”

<defs>
    <!--<pattern id="myPattern" width="0.2" height="0.2">-->
    <!--<pattern id="myPattern" width="0.2" height="0.2" patternUnits="objectBoundingBox">-->
    
    <pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse">
         <circle cx="10" cy="10" r="10" fill="red"></circle>
    </pattern>
    
</defs>

 <!--<circle cx="10" cy="10" r="10" fill="red"></circle>-->
 <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>

十七、SVG形變

<!--簡單的理解: 一句話和Canvas一樣, 改變的是座標系-->
<rect x="100" y="250" width="300" height="200" fill="blue" transform="rotate(15)"></rect>

<!--旋轉：transform="rotate(-30,50,550 )，第一個數爲旋轉角度，後面兩個數爲旋轉參考座標"-->
<rect x="50" y="550" width="300" height="200" fill="blue''  transform="rotate(-45,50,550 )"></rect>

十八、SVG-ViewBox

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

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

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

3.默認情況下如果 viewBox 的尺寸是等比縮放的, 那麼調整後 viewBox 區域的 xy 和內容區域的 xy 對齊；但是如果 viewBox 的尺寸不是等比縮放的, 那麼系統就會調整viewBox的位置, 我們設置的 x / y 會失效, 此時如果需要 viewBox 的xy和內容區域 (viewProt) 的 xy 繼續保持重合, 那麼就需要使用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 150 50" preserveAspectRatio="xMinYMin">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

十九、SVG動畫

在SVG中提供了三種常用動畫標記：

  <animate> 基礎動畫
  <animateTransform> 形變動畫
  <animateMotion> 路徑動畫

SVG動畫使用方式
2.1創建動畫, 告訴動畫標記哪個元素需要執行動畫
2.2創建元素, 在元素中說明需要執行什麼動畫
SVG動畫屬性
attributeType: CSS / XML 規定的屬性值的名稱空間
attributeName: 規定元素的哪個屬性會產生動畫效果
from/to: 從哪到哪
dur: 動畫時長
fill: 動畫結束之後的狀態保持結束狀態 freeze / remove 恢復初始狀態

<svg width="500" height="500">

<circle cx="100" cy="100" r="50" fill="blue">
            <animate
                    attributeName="r"
                    from="50"
                    to="100"
                    dur="5s"
                    fill="freeze"
            ></animate>
</circle>
</svg>

SVG常用動畫屬性
repeatCount: 規定動畫重複的次數。
repeatDur: 規定動畫重複總時長
begin: 規定動畫開始的時間
begin=“1s”
begin=“click”
begin=“click + 1s”
restart: 規定元素開始動畫之後，是否可以被重新開始執行
always：動畫可以在任何時候被重置。這是默認值。
whenNotActive：只有在動畫沒有被激活的時候才能被重置，例如在動畫結束之後。
never：在整個SVG執行的過程中，元素動畫不能被重置。
calcMode: 規定每一個動畫片段的動畫表現
linear：默認屬性值, 勻速動畫
discrete: 非連續動畫, 沒有動畫效果瞬間完成
paced: 規定整個動畫效果始終以相同的速度進行，設置keyTimes屬性無效
spline: 配合keySplines屬性來定義各個動畫過渡效, 自定義動畫
keyTimes: 劃分動畫時間片段, 取值0-1
values: 劃分對應取值片段的值

更多: www.w3.org/TR/SVG/animate.html


<svg width="500" height="500">
     <circle cx="100" cy="100" r="50" fill="blue">
            <animate
                    attributeName="r"
                    from="50"
                    to="100"
                    dur="2s"
                    fill="freeze"
                    begin="click"
                    calcMode="linear"
                    keyTimes="0;0.5;1"
                    values="20;50;100"
            ></animate>
      </circle>
</svg>

SVG混合動畫

<svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="blue">

           <animate
                    id="toRight"
                    attributeName="cx"
                    from="100"
                    to="300"
                    dur="2s"
                    begin="0;toLeft.end"
                    fill="freeze"
            ></animate>
            
            <animate
                    id="toLeft"
                    attributeName="cx"
                    from="300"
                    to="100"
                    dur="2s"
                    begin="toRight.end + 2s"
                    fill="freeze"
            ></animate>
            
        </circle>
 </svg>

SVG形變動畫

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="blue">
        <animateTransform
                attributeName="transform"
                type="scale"
                from="1 1"
                to="0.5 1"
                dur="2s"
                begin="click"
                fill="freeze"
        ></animateTransform>
    </rect>
</svg>

SVG路徑動畫

<svg width="500" height="500" viewBox="-100 -100 500 500">

    <path d="M0 0 C0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
    
    <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
            path="M0 0 C0 300 300 300 300 0"
            dur="5s"
            begin="click"
            fill="freeze"
            rotate="auto"
        ></animateMotion>
    </rect>
    
</svg>

二十、SVG腳本編程

1.SVG腳本編程注意點:
創建SVG時必須指定命名空間
const SVG_NS = http://www.w3.org/2000/svg

2.SVG腳本編程注意點:
使用xlink屬性也必須指定命名空間
const XLINK_NS = “http://www.w3.org/1999/xlink”;

3.腳本編程推薦自學svg框架
https://svgjs.com/
http://snapsvg.io/docs/

<script>

const SVG_NS = "http://www.w3.org/2000/svg"
    // let oSvg = document.createElement("svg");
    let oSvg = document.createElementNS(SVG_NS,"svg");
    oSvg.setAttribute("width", "500");
    oSvg.setAttribute("height", "500");
    document.body.appendChild(oSvg);

    // let oCircle = document.createElement("circle");
    let oCircle = document.createElementNS(SVG_NS,"circle");
    oCircle.setAttribute("cx", "100");
    oCircle.setAttribute("cy", "100");
    oCircle.setAttribute("r", "50");
    oCircle.setAttribute("fill", "red");
    oSvg.appendChild(oCircle);

    const XLINK_NS = "http://www.w3.org/1999/xlink";
    let oImage = document.createElementNS(SVG_NS, "image");
    oImage.setAttribute("x", "200");
    oImage.setAttribute("y", "200");
    // oImage.setAttribute("xlink:href", "images/lnj.jpg");
    oImage.setAttributeNS(XLINK_NS,"xlink:href", "images/lnj.jpg");
    oSvg.appendChild(oImage);
    
</script>

-End