svg入门

1.svg文件引入

• 可通过<object data="image.svg" type="image/svg+xml" />，<iframe src="image.svg"></iframe>引入使用
• 理论上同样可以使用 img 元素，但是在低于4.0版本的Firefox 中不起作用

2.svg坐标系统

• 用户单位和屏幕单位的映射关系被称为用户坐标系统
• 默认1用户像素 === 设备上的1像素（但是设备上可能会自己定义1像素到底是多大）

3.svg形状

• react
• circle，ellipse
• line，polyline
• polygon
• path

4.svg形状之path

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

属性d的值是一个“命令+参数”的序列，每一个命令都有两种表示方式：

• 用大写字母，表示采用绝对定位 M10 10
• 用小写字母，表示采用相对定位，例如：从上一个点开始，向上移动10px，向左移动7px m 10 10
  例如画一个矩形：

大写：
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

小写：
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

因为属性d采用的是用户坐标系统，所以不需标明单位。

命令	表达方式（默认第一种写法）	描述
M	M10 10	移动画笔位置，但是不画线，从一个点到另一个
L	L10 10/平行线 H10／垂直线 V10	绘制线条
Z	Z不区分大小写	Z命令会从当前点画一条直线到路径的起点
	贝塞尔曲线-在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q
C	C 20 20, 40 20, 50 10	最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点
S	S x2 y2, x y	S命令可以用来创建与之前那些曲线一样的贝塞尔曲线，但是，如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，那么它的两个控制点就会被假设为同一个点。
Q	Q x1 y1	只有一个控制点，用来确定起点和终点的曲线斜率
T	T x y	T命令前面是一个Q命令，或者是另一个T命令,T会通过前一个控制点推断与之定义的终点之间的控制点
	弧形，基本上，弧形可以视为圆形或椭圆形的一部分
A

5.填充和边框

• stroke
• stroke-opacity
• stroke-linecap: 'butt','square','round' 描边方式
• stroke-width
• stroke-linejoin: 'miter','round','bevel' 2条线段之间的描边方式
• stroke-dasharray 是一组用逗号分割的数字组成的数列
• stroke-dashoffset，定义虚线开始的位置
• fill
• fill-opacity
• fill-rule，用于定义如何给图形重叠的区域上色

利用style设置svg css

<defs>表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css"><![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
       }
    ]]></style>
  </defs>
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

6.渐变

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
 
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
  
</svg>

线性渐变linearGradient，渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向
径向渐变radialGradient