SVG基础教程(超级详细)

一、内置图形:

rect(矩形)    
circle(圆)  
ellipse(椭圆)   
line(直线)   
polyline(折线)  
polygon(多边形)  
path(路径)
text(文本)
image(图形)
use(复制元素)

二、内置图形的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" />

第一个点不会和最后一个点连起来，不会闭合

四、图形元素用法

1、路径

路径是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"/>

图片描述

1.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;"/>

1.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" />

2、文本

基本用法

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

3、image图像

<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="200" width="300"/>

x表示图像左上角在水平方向的位移，
y表示图像做商检在竖直方向的位移，
height，width分别为image的高度和宽度。

注意：默认图像不会缩放，即使定义了height，width，也不会缩放铺满剩余区域，

如果要控制image的缩放，需要设置preserveAspectRatio值。

preserveAspectRatio="<align> [<meetOrSlice>]"

meetOrSlice只有两个值：meet|slice，默认meet

   meet表示保留长宽比，image或者viewbox在定义的width和height区域都是可见的。
   slice表示保留长宽比，但是整个 定义的width和height区域都由image覆盖，如下(很神奇，被拉直了，原图是折的)

align有一下值：none|xMinYMin|xMidYMin|xMaxYMin|...

   none表示，图片避讳保持长宽比，直接按照100%，在image的width和height指定的区域铺满，

    除none之外，其他的值都是表示在保持长宽比没有铺满时的放置位置的。如xMidYMin，表示水平上，放在中间，竖直上，放在开头。

<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
    x="0"
    y="0"
    height="200"
    width="300" 
    preserveAspectRatio="xMidYMin  meet"/>

4、use

该<use>元素从SVG文档中获取节点，并在其他位置复制它们。

当use复制其他元素后，还能对复制的元素进行属性的覆盖。
x, y, width, height，href这几个属性，不管源元素是否有设置，都可以覆盖。
而其他属性，如果源元素已经设置，则无法覆盖，如果没有设置，则可以再use上设置。

<svg viewBox="0 0 30 10"
     xmlns="http://www.w3.org/2000/svg">
             
    <circle id="myCircle"
        cx="5"
        cy="5"
        r="4"
        stroke="blue" />
     
    <use href="#myCircle"
        x="10"
        fill="blue" />
     
    <use href="#myCircle"
        x="20"
        fill="white"
        stroke="red" />
</svg>

可以看到设置的x属性覆盖成功了，第二个use的fill也设置成功了，但是第三个use 的stroke没有变成红色，因为circle已经指定了，所以无法覆盖。

五、容器元素用法

1、链接元素

svg的链接元素 a和html的链接元素a很相似，都是指向一个超链接。

在svg的a元素中，可以包含任何的形状

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35"/>
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>

注意：在获取svg的a元素时，为了区分html的a元素，要加命名空间

//css
@namespace svg url(http://www.w3.org/2000/svg);

svg|a {}

2、defs

defs元素通常用来存储在后续将会用到的图像，其 defs中的图像，不会直接呈现，必须在后续通过其他元素引用才能呈现。

相当于在js中，封装的一个方法，供其他地方调用。在这里，是封装了一段html，供后续的html调用。

一般情况下，defs中用来定义过滤，渐变，填充(pattern)等效果。

<svg viewBox="0 0 10 10"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- 定义一个线性渐变，外部的所有元素都可以引用这个效果 -->
        <linearGradient id="myGradient"
            gradientTransform="rotate(90)">
            <stop offset="20%"
                stop-color="gold" />
            <stop offset="90%"
                stop-color="red" />
        </linearGradient>
    </defs>

    <!-- 在defs的外部通过使用url(defs中的id值) 来引用defs中定义的图形 -->
    <circle id="myCircle"
        cx="0"
        cy="0"
        r="5"
        fill="url('#myGradient')" />
</svg>

3、g

<g>元素是一个用于对其他SVG元素进行分组的容器。

在<g>元素上设置的属性和变换，会统一影响g分组中的所有元素，会把g元素当成一个整体处理。

和前面的defs类似，只是<g>中的元素会直接作为一个整体呈现，可以不需要引用就能呈现，当然也能被use复制。

<svg width="300" height="300"
    xmlns="http://www.w3.org/2000/svg">
    <!-- 将g中的元素作为一个整体，统一设置stroke，transform等 -->
    <g id="myG"
        stroke="green"
        transform="rotate(20 20,40)"
        stroke-width="5">
        <circle cx="40"
            cy="40"
            r="25" />
        <circle cx="60"
            cy="60"
            r="25" />
    </g>

    <!-- 使用use复制g，并且覆盖fill属性 -->
    <use href="#myG"
        x="100"
        fill="blue" />
</svg>

4、mask

mask元素定义了一个alpha通道(我也不懂，大概懂PS的大神才知道)，用于将当前对象合成到背景中，在其他元素上通过mask属性来引用。
其本身不会呈现，必须被其他元素引用才能呈现。

<svg viewBox="-10 -10 120 120">
    <!-- 定义一个mask 遮罩 -->
    <mask id="myMask" x="0" y="0">
        <rect x="0"
            y="0"
            width="100"
            height="100"
            fill="red" />

        <!-- Everything under a black pixel will be invisible -->
        <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
            fill="blue" />
    </mask>

    <polygon points="-10,110 110,110 110,-10"
        fill="orange" />

    <!-- 通过mask属性引用 mask元素 -->
    <circle cx="50"
        cy="50"
        r="50"
        mask="url(#myMask)" />
</svg>

不定义mask时这样

定义后这样

不可思议。。。

mask元素有以下属性

x 此属性定义遮罩区域左上角的x轴坐标。
y 此属性定义遮罩区域左上角的y轴坐标。
width 此属性定义遮罩区域的宽度。
height 此属性定义遮罩区域的高度。
maskContentUnits： userSpaceOnUse|objectBoundingBox，默认为userSpaceOnUse, 对mask中的内容定义坐标系类型。如上面的react中的x，y等属性
maskUnits： userSpaceOnUse|objectBoundingBox，默认为objectBoundingBox，对mask本身定义坐标系类型。如mask上的x，y等

userSpaceOnUse此值表示<mask>元素内的所有坐标都是指创建蒙版时定义的用户坐标系。
objectBoundingBox此值指示<mask>元素内的所有坐标都相对于应用蒙版的元素的边界框。

5、pattern

pattern元素定义了一个填充对象，这个对象，可以在其寄宿元素内重复平铺覆盖以占满寄宿元素(谁引用pattern，谁就是寄宿元素)。

一般情况下，元素通过自身属性的fill或者 stroke来引用pattern元素。

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

pattern里面不仅可以使用图案，还能放置图片<image>元素。但是不管放置哪个。里面的图形，都会保持图形自身的长宽比平铺，并不会按照pattern定义的width，height，100%占满 pattern。
如果不能100%占满 pattern，那么当 pattern在寄宿元素上，重复平铺时，每个pattern之间看起来就会有间隔。

//宽度变为20%
<pattern id="star"
    width="20%"
    height="10%"
    viewBox="0 0  10 10">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>

pattern的属性

x x坐标起始位置。
y y坐标起始位置。
width pattern的宽度。
height pattern的高度。
viewBox 定义pattern元素的的SVG视口的边界。
preserveAspectRatio 定义当前元素指定的width，height与里面元素实际展示的尺寸的比例变换关系。

preserveAspectRatio决定的是当前元素定义的width，height属性和里面元素实际展示的关系。默认里面的元素保持自身的长宽比，即使preserveAspectRatio所在元素的width，height超过了里面元素的实际宽，高。
如果为none，则表示里面的元素在水平、竖直方向上100% 占满pattern定义的width，height。

//设置preserveAspectRatio
<pattern id="star"
    width="20%"
    height="10%"
    viewBox="0 0  10 10"
    preserveAspectRatio="none">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>

这样pattern中的元素会在 pattern定义的20%,10%的宽高上平铺。

除了svg之外，css中的clip-path也可以通过裁剪的方式做圆、椭圆的剪切。

clip-path: inset(40px 25px 20px 0px);  //距上为40， 距离右边为25，距下面为20，距离左边为0的矩形
clip-path: circle(200px at 0px 0px);  //以0 0 为圆心，200为半径的圆
clip-path: ellipse(100px 50px at 50% 50%); //x轴半径为100， y轴半径为50，圆心为50% 50%的椭圆
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);  //多边形，每一个为一个顶点

6、marker

marker元素定义了用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或多点标记的图形。
在元素上使用 marker-start, marker-mid, 和 marker-end 属性，来引用marker元素。

marker有如下属性:

markerHeight: 定义marker元素的高度
markerWidth: 定义marker元素的宽度
markerUnits: 该属性为markerWidth、markerHeight以及marker的内容定义了坐标系统。 userSpaceOnUse|strokeWidth
orient：定义marker相对于寄宿元素的方向，值有auto|auto start-reverse|<angle>。
refX: marker元素相对于X轴的偏移。和正常坐标系相反，正值向左，负值向右。
refY：marker元素相对于Y轴的偏移。和正常坐标系相反，正值向上，负值向下。
viewBox：当前marker片段定义SVG视图端口的边界。
preserveAspectRatio：定义了如果marker片段嵌入到具有不同纵横比的容器中，则必须如何对其进行变形。

注意：
如果一个元素定义了marker-start，那么就在开头的位置添加marker，
如果一个元素定义了marker-mid，那么就在所有中间位置添加marker，
如果一个元素定义了marker-end，那么就在结尾位置添加marker。

可以定义多个，那么也就添加多个。

<svg viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- 定义一个箭头标记-->
        <marker id="arrow"
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            markerWidth="16"
            markerHeight="6"
            markerUnits="strokeWidth"
            preserveAspectRatio="none"
            orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>

        <!-- 定义一个点标记 -->
        <marker id="dot"
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            markerWidth="5"
            markerHeight="5">
            <circle cx="5"
                cy="5"
                r="5"
                fill="red" />
        </marker>
    </defs>

    <!-- 在开头和结尾位置添加 marker，开头为10,10  结尾为90，90 -->
    <polyline points="10,10 10,90 90,90"
        fill="none"
        stroke="black"
        marker-start="url(#arrow)"
        marker-end="url(#arrow)" />

    <!-- 在开头，结尾和中间 位置添加 marker，开头为15,80  结尾为85,15，其余全为中间 -->
    <polyline points="15,80 29,50 43,60 57,30 71,40 85,15"
        fill="none"
        stroke="grey"
        marker-start="url(#dot)"
        marker-mid="url(#dot)"
        marker-end="url(#dot)" />
</svg>

7、symbol

定义一个模板元素，本身是不会呈现的，只有使用use引用后，才会呈现出来。

<svg viewBox="0 0 100 100"
    width="300"
    height="300"
    xmlns="http://www.w3.org/2000/svg">
     
    <!-- symbol definition  NEVER draw -->
    <symbol id="sym01"
        viewBox="0 0 150 110">
        <circle cx="50"
            cy="50"
            r="40"
            stroke-width="8"
            stroke="red"
            fill="red" />
        <circle cx="90"
            cy="60"
            r="40"
            stroke-width="8"
            stroke="green"
            fill="white" />
    </symbol>

    <!-- actual drawing by "use" element -->
    <use xlink:href="#sym01"
        x="0"
        y="0"
        width="100"
        height="50" />

</svg>

只呈现出来了use元素，symbol元素本身没有呈现。

8、svg

svg所定义的片段，不管在独立的svg文件中，还是嵌入html中，都拥有独立的视口和坐标系统。

<svg xmlns="http://www.w3.org/2000/svg"
    width="150"
    height="100"
    viewBox="0 0 3 2">

    <rect width="1"
        height="2"
        x="0"
        fill="#008d46" />
    <rect width="1"
        height="2"
        x="1"
        fill="#ffffff" />
    <rect width="1"
        height="2"
        x="2"
        fill="#d2232c" />
</svg>

上面的svg为一幅意大利国旗

svg元素有如下专有属性:

version：指明 SVG 文档遵循规范，值为1.0 | 1.1
x：起始横坐标
y：起始纵坐标
width：svg元素的宽度
height：svg元素的高度
preserveAspectRatio：是否强制进行统一缩放.
viewBox：允许指定一个给定的一组图形伸展以适应特定的容器元素。

六、视口 viewbox

viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height

下面的不设置 viewbox的情形:

<svg x="0" y="0" width="500" height="60"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="0"
        y="0"
        width="100"
        height="150" />

</svg>

矩形起始于 svg的（0,0）位置，长度为100px，宽度为150px

当设置viewbo后

<svg viewBox="-5 -5 100 150"  width="500" height="600"
            xmlns="http://www.w3.org/2000/svg">

            <rect x="0"
                y="0"
                width="100"
                height="150" />

        </svg>

可以看到，不仅变大了，而且还向右下角平移了。
为什么呢？

我们可以看到 viewBox的值为"-5 -5 100 150"，（-5 -5）分别表示最小的x和最小的y，也就是说，左上角原本的（0,0）现在等价于(-5,-5), 那么如果想要时rect 还是在原来的左上角，那么<rect x="-5" y="-5" width="100" height="150" />才可以，而如果设置为
<rect x="0" y="0" width="100" height="150" />就会向右向下平移5px。

然后我们看到viewbox后两个是100 150，分别表示 svg的宽度和高度，即100等同于svg定义的宽度500,150等同于svg定义的高度600，那么在svg容器里面的rect 上设置 width为100，等同于500，高为150，等同于600，这样会有个问题，就是本来rect的长宽比为100:150，而通过viewbox设置后，长宽比会变化，所以svg默认即使viewbox宽度比变化了，但是viewbox容器里的元素的长宽比不会变化，会以缩放较小的那个为准。

所以我们可以看到 viewbox相当于一个比例尺，对原本的svg的位置和宽高做了相同比例的缩放。

一共有下面的5个元素可以设置 viewbox:
<marker>, <pattern>, <svg>, <symbol>, 和 <view>

与viewbox相关的另一个属性是preserveAspectRatio。
如果说viewbox是控制容器里面元素等比缩放的比例尺的话， preserveAspectRatio就是用来指定是否需要等比缩放，如果不等比缩放，是否需要整个填充。

preserveAspectRatio：<align> [<meetOrSlice>]

除了 <image> 元素之外，其他元素使用preserveAspectRatio必须在同一元素上为 viewBox 提供的值。如果没有提供属性 viewBox ，则忽略了preserveAspectRatio。

七、渐变

分为线形渐变和径向渐变，渐变本身不会渲染，必须通过具体元素的fill引用才生效

<svg width="500"
    height="600"
    xmlns="http://www.w3.org/2000/svg">

    <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" />
</svg>

八、滤镜

比较复杂，用的也比较少，使用时可以查找文档
svg 滤镜

九、动画和交互性

动画被弃用，请使用css animations或者web animations代替

十、事件

最常用的是 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的css样式

由于在html中，有a元素，所以这就导致了，在css中，使用a时，无法判断是获取的html的a，还是svg的a，所以最好的方式是使用命名空间，来限定。

<svg width="300"
    height="300"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- A link around a shape -->
    <a href="/docs/Web/SVG/Element/circle">
        <circle cx="50"
            class="my-circle"
            cy="40"
            r="35" />
    </a>

    <!-- A link around a text -->
    <a href="/docs/Web/SVG/Element/text">
        <text x="50"
            y="90"
            text-anchor="middle">
            &lt;circle&gt;
        </text>
    </a>
</svg>

@namespace svg url(http://www.w3.org/2000/svg);   //svg为命名名称，可以自定义


//元素选择器
svg|a:link,
svg|a:visited {
  cursor: pointer;
}

//表示只对svg下的a的 进行操作
svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}


//class选择器， 此处circle只有svg中才有这个元素，所以可以不用加命名空间
circle.my-circle {
  stroke: #006600;
  fill: #cc0000;
}

十二、好用的svg库

1、svg.js

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

2、Snap.svg

Snap.svg更接近jquery的语法，来操作svg。Snap.svg更全，功能丰富。

参考文档: https://developer.mozilla.org...

SVG基础教程(超级详细)

一、内置图形:

二、内置图形的html属性或(css样式):

三、基本元素用法

1、矩形

2、圆

3、椭圆

4、直线

5、多边形

6、折线

四、图形元素用法

1、路径

1.1、贝塞尔曲线(CSQT简称“厕所切图”)

1.2、圆弧

2、文本

3、image图像

4、use

五、容器元素用法

1、链接元素

2、defs

3、g

4、mask

5、pattern

6、marker

7、symbol

8、svg

六、视口 viewbox

七、渐变

八、滤镜

九、动画和交互性

十、事件

十一、svg的css样式

十二、好用的svg库

1、svg.js

2、Snap.svg

寒水寺一禅

引用和评论

前端性能优化(图文并茂，通俗易懂)

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具