svg——适量图形的创造(1)

前几天，尝试用html+css制作图像的痛苦历历在目，绞尽脑汁的去实现各种曲线，不断的调试逼近，才出现一个勉强一看的图形。然后震惊的发现，原来这些图像用svg做可以非常容易的解决，所以今天决定对svg的学习做一个初略的记录。

基本信息

一个简单的SVG文档由

• SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）
• SVG里的属性值必须用引号引起来，就算是数值也必须这样做。

网格

svg的坐标系统与我们平常的绘图坐标方式是相反的。
这种坐标系统是：以页面的左上角为（0,0）坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。

SVG｜MDN

基本图形

• 矩形

x         矩形左上角的x位置 
y         矩形左上角的y位置
width     矩形的宽度
height    矩形的高度
rx        圆角的x方位的半径
ry        圆角的y方位的半径

• 圆形

r         圆的半径  （椭圆：cx  椭圆中心的x位置 
                            cy  椭圆中心的y位置 ）
cx        圆心的x位置
cy        圆心的y位置

• 折线

points点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

• 多边形

polygon和折线很像。不同的是，polygon的路径在最后一个点处自动回到第一个点。

• 路径

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文档中，元素内部可以放任何的文字。

Hello World!