SVG基礎教程(超級詳細)

小李子的一天發表於2017-11-19
SVG

一、內建圖形:

rect(矩形)    
circle(圓)  
ellipse(橢圓)   
line(直線)   
polyline(折線)  
polygon(多邊形)  
path(路徑)

二、內建圖形的html屬性或(css樣式):

fill(填充顏色)   
fill-opacity(填充透明度)
stroke(邊框顏色)   
stroke-width(邊框寬度)   
stroke-opacity(邊框透明度)   
stroke-dasharray(建立虛線)
transform(變換)
filter(濾鏡)(url[#濾鏡id)]

三、常見圖形用法

1、矩形

基本用法

<rect x="0" y="0" width="100" height="100" fill="#f06"/> 
<!--x表示橫座標，y表示縱座標，width表示寬，height表示高-->

clipboard.png

擴充套件用法

<rect x="50" y="20" width="150" height="150"
      style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
 
<rect x="50" y="20" width="150" height="150"
      fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>

2、圓

基本用法

<circle cx="100" cy="50" r="100" fil='#f06'/>            
<!-- cx表示圓心橫座標，cy表示圓心縱座標，r表示半徑 -->

clipboard.png

擴充套件用法

<circle cx="100" cy="50" r="40" 
        style="stroke:blue;stroke-width:10;fill:pink"/>
 
<circle cx="100" cy="50" r="40" 
        stroke="black" stroke-width="2" fill="red"/>

3、橢圓

基本用法

<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>  
<!-- cx表示圓心橫座標，cy表示圓心縱座標，rx表示橫向半徑，ry表示縱向半徑 -->

clipboard.png

擴充套件用法

<ellipse cx="300" cy="80" rx="100" ry="50" 
         style="fill:yellow;stroke:purple;stroke-width:2" />
 
<ellipse cx="300" cy="80" rx="100" ry="50" 
         fill="pink" stroke="red" stroke-width="2"/>

4、直線

基本用法

<line x1="0" y1="100" x2="100" y2="0"/>    
<!-- x1起點橫座標，y1表示起點縱座標，x2表示終點橫座標，y2表示終點縱座標 -->

clipboard.png

擴充套件用法

<line x1="0" y1="0" x2="200" y2="200"
      style="stroke:rgb(255,0,0);stroke-width:2"/>
 
<line x1="0" y1="0" x2="200" y2="200" 
      stroke="red" stroke-width="10"/>

5、多邊形

基本用法

<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>         
<!-- 200,10為第一個點   250,190為第二個點  160,210為第三個點 -->

clipboard.png

擴充套件座標

<polygon points="200,10 250,190 160,210" 
         style="fill:lime;stroke:purple;stroke-width:1" />

<polygon points="200,10 250,190 160,210"
         fill="red" stroke="blue" stroke-width="1" />

第一個點和最後一個點會連線起來，形成閉合的圖形

6、折線

基本用法

<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>

clipboard.png

擴充套件用法

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:none;stroke:red;stroke-width:4" /> 
<!--此處將fill設定為none，可以僅僅畫曲線，而如果fill有值，則會形成由曲線圍城的多邊形-->
    
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:blue;stroke:red;stroke-width:4" />

第一個點不會和最後一個點連起來，不會閉合

7、路徑

路徑是svg中最強大的圖形

路徑是由一系列命令所組成。

命令            名稱                        引數
 M           moveto  移動到                (x y)+
 Z          closepath  關閉路徑            (none)
 L           lineto  畫線到                (x y)+
 H          horizontal lineto  水平線到      x+
 V          vertical lineto  垂直線到        y+
 A        elliptical arc橢圓弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
 C        curveto 三次貝塞爾曲線到          (x1 y1 x2 y2 x y)+
 S     smooth curveto光滑三次貝塞爾曲線到   (x2 y2 x y)+
 Q        Bézier curveto二次貝塞爾曲線到    (x1 y1 x y)+
 T     smooth Bézier curveto光滑二次貝塞爾曲線到  (x y)+

如果指令字母是大寫的，例如M, 則表示座標位置是絕對位置；如果指令字母小寫的，例如m, 則表示座標位置是相對位置。

基本用法

<path d="M150 0 L75 200 L225 200 Z" />      
<!-- d屬性中包含所有路徑的點，最後起點和終點連線起來形成閉合圖形 -->

擴充套件用法

<path d="M150 0 L75 200 L225 200 Z" 
      fill="red" stroke="blue" stroke-width="10"/>

圖片描述

7.1、貝塞爾曲線(CSQT簡稱“廁所切圖”)

(1)、三次貝塞爾曲線

Cx1 y1, x2 y2, x y

x1,y1 和x2，y2分別為控制點1和2，而x，y為曲線上的關鍵點
圖片描述
下面為曲線上的點隨著時間的變化而變化的過程。
clipboard.png

<path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(2)、光滑三次貝塞爾曲線

Sx2 y2, x y

S指令跟在C指令或S指令後面補刀，它會自動在C、S基礎上生成一個對稱點，所以S指令只需要兩個點就可以。
clipboard.png

<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120 S380 150, 450 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 S80 150, 150 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(3)、二次貝塞爾曲線

Qx1 y1, x y

(x1,y1)是控制點，(x,y)表示的是曲線的終點。
clipboard.png
下面為曲線上的點隨著時間的變化而變化的過程。
clipboard.png

<path d="M20 80 Q90 140, 130 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(4)、光滑二次貝塞爾曲線

Tx y

T指令和S指令類似，是給Q、T指令補刀的，T指令只有一個曲線終點，沒有控制點(由Q的對稱點自動生成)；
也可以單獨使用，當單獨使用時，是一條直線；
clipboard.png

<path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 T350 140 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>

7.2、圓弧

A rx ry x-deg large-arc sweep-flag x y

rx ry表示x軸半徑和y軸半徑，x-deg表示x軸旋轉角度，large-arc表示大於180度還是小於180度(0為小，1為大)，sweep-flag表示弧線方向(0為沿逆時針，1為沿順時針)，x y為最終座標。

<path d="M80 80 A45 45, 0, 0, 0, 125 125" fill="green" />

8、文字

基本用法

<text x="10" y="15">I love SVG</text>

擴充套件用法

<text x="0" y="15" 
      fill="red" transform="rotate(30 20,40)">I love SVG</text>

<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
</a>

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
    i LOVE d3
</text>  
<!-- dx，dy表示平移的距離 -->

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
    I LOVE <tspan fill="red">D3</tspan>      
</text>
<!-- 使用tspan對文字中的部分特殊定義 -->

沿path方向排列文字textPath

<path id="wavyPath" d="M75,100 a50,25 0 1,0 50,25" fill="none" />
<text x="50" y="50" font-size="14">
    <textPath xlink:href="#wavyPath">
            Text travels along any path that you define for it.
    </textPath>
</text>

9、漸變

分為線形漸變和徑向漸變

<defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">  <!--x1,y1 x2,y2用來定義徑向漸變的方向，此處為向右-->
        <stop offset="0%" stop-color="blue">
        <stop offset="100%" stop-color="red">
    </linearGradient>
    <radialGradient id="irisGradient">
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />
    </radialGradient>
</defs>
<rect fill="url(#myGradient)" x1="10" y1="10" width="300" height="100"/>

10、定義和分組

定義可重用部件

<defs></defs>

使用g分組，或定義統一的樣式。

<g></g>

使用<use xlink:href="#lens" />引用在defs中定義的元素，還可在use上設定fill，stroke等屬性。

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="red" stroke="purple" stroke-width="4" />
        <radialGradient id="irisGradient">
            <stop offset="25%" stop-color="green" />
            <stop offset="100%" stop-color="dodgerblue" />
        </radialGradient>
        <g id="eye">
            <ellipse cy="50" rx="50" ry="25" fill="none" stroke="black" />
            <circle cy="50" r="25" />
            <circle cy="50" r="10" fill="black" />
        </g>
    </defs>
    <g stroke="red" stroke-width="3">
        <ellipse cx="125" cy="50" rx="50" ry="25" fill="none" stroke="black" />
        <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
        <circle cx="125" cy="50" r="10" fill="black" />
        <use xlink:href="#eye" x="250" fill="dodgerblue" />
    </g>
</svg>

11、動畫和互動性

動畫被棄用，請使用css animations或者web animations代替

12、事件

最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="120" height="120" viewBox="0 0 120 120"
     version="1.1">
        <polygon points="60,30 90,90 30,90" id="svg_polygon">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
        </polygon>
</svg>
<script>
    //svg_hexagon為path的id
    document.getElementById("svg_polygon").addEventListener("click", function() {
        //todo
    });
</script>

四、好用的svg庫

1、svg.js

svg.js更加接近原生svg語法，可以直觀的操作svg。svg.js更快，相容性好，上手更方便。

2、Snap.svg

Snap.svg更接近jquery的語法，來操作svg。Snap.svg更全，功能豐富。

相關文章