前几天，尝试用html+css制作图像的痛苦历历在目，绞尽脑汁的去实现各种曲线，不断的调试逼近，才出现一个勉强一看的图形。然后震惊的发现，原来这些图像用svg做可以非常容易的解决，所以今天决定对svg的学习做一个初略的记录。
基本信息
一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但都需要在一个定义好的图形区域内实现。
- SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）
- SVG里的属性值必须用引号引起来，就算是数值也必须这样做。
网格
svg的坐标系统与我们平常的绘图坐标方式是相反的。
这种坐标系统是：以页面的左上角为（0,0）坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。
SVG｜MDN
基本图形
- 矩形
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径
- 圆形
<circle cx="25" cy="75" r="20"/>
r 圆的半径 （椭圆：cx 椭圆中心的x位置
cy 椭圆中心的y位置 ）
cx 圆心的x位置
cy 圆心的y位置
- 折线
<polyline points="60 110, 65 120, 70 115"/>
points点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
- 多边形
<polygon points="50 160, 55 180, 70 180"/>
polygon和折线很像。不同的是，polygon的路径在最后一个点处自动回到第一个点。
- 路径
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
svg中最常见的形状，也是最强大的功能，可以实现所有的基本形状。
路径
- 直线命令
M x y (or m dx dy) 对画笔的绝对定位
L x y (or l dx dy) 在当前位置和新位置之间画一条线段
H x (or h dx) 绘制平行线
V y (or v dy) 绘制垂直线
Z (or z) 从当前点画一条直线到路径的起点
- 曲线命令
贝塞尔曲线
我们从稍微复杂一点的三次贝塞尔曲线C入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
另一种可用的贝塞尔曲线是二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
Q x1 y1, x y (or q dx1 dy1, dx dy)
弧形
基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，另外已知两个点（它们的距离在圆的半径范围内），这时我们会发现，有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以，为了保证创建的弧形唯一，A命令需要用到比较多的参数：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
...........................................................
large-arc-flag（角度大小） 和sweep-flag（弧线方向）
large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。
sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。
上色
大多数基本的涂色可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。
fill 属性设置对象内部的颜色
stroke属性设置绘制对象的线条的颜色。
此外，在SVG中你可以分别定义填充色和边框色的不透明度。
fill-opacity属性 控制填充色的不透明度
stroke-opacity属性 控制描边的不透明度。
text
在一个SVG文档中，<text>元素内部可以放任何的文字。
<text x="10" y="10">Hello World!</text>
网友评论