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表示高-->

扩展用法

<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表示半径 -->

扩展用法

<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表示纵向半径 -->

扩展用法

<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表示终点纵坐标 -->

扩展用法

<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为第三个点 -->

扩展坐标

<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'/>

扩展用法

<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为曲线上的关键点
图片描述
下面为曲线上的点随着时间的变化而变化的过程。

<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指令只需要两个点就可以。

<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)表示的是曲线的终点。

下面为曲线上的点随着时间的变化而变化的过程。

<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的对称点自动生成)；
也可以单独使用，当单独使用时，是一条直线；

<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更全，功能丰富。