svg入门
2017-04-08 本文已影响35人
Jmingzi_
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
