SVG 基础
svg 的坐标轴，是以屏幕左上角为原点，向右为x轴，向下为y轴。
常用属性
- fill：背景颜色 （默认为黑色）
- stroke：border边框颜色
- stroke-width：border宽度 （默认值为1）
- stroke-dasharray：用于创建虚线
- stroke-linecap：定义边线的结束形状。如圆角等等
- x,y和cx,cy：用于指定位置默认值为0,0
常用形状
circle 圆
<svg viewBox="10 10 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" fill="red"/>
</svg>
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- r属性定义圆的半径
- fill 为填充颜色，默认为黑色
ellipse 椭圆
<svg viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2" />
</svg>
形状样式除了以属性的方式赋值，我们也可以采用css样式来设置！
line 直线
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2" />
</svg>
- x1：起始点横坐标
- y1：起始点纵坐标
- x2：结束点横坐标
- y2：结束点纵坐标
polygon 多边形
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250" style="fill:#cccccc;
stroke:#000000;stroke-width:1" />
</svg>
- points：表示多边形顶点坐标(可以用逗号分隔，也可以用空格)
至少需要三个点，才能形成一个闭合多边形，两个点就是一根线！
polyline 多段线
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="220,100 300,210 170,250" style="fill:#cccccc;
stroke:#000000;stroke-width:1" />
</svg>
和polygon类似，只是不闭合
rect 矩形
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
- width：宽度
- height：高度
text 文字
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="15" fill="red">svg 基础图形</text>
</svg>
path 路径
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
- M：moveto 移动到
- L：lineto 绘制线到
- H：horizontal lineto 垂直绘制线条到
- V：vertical lineto 水平绘制到
- C：curveto 曲线绘制到
- S：smooth curveto 光滑曲线
- Q：quadratic Bézier curve 二次贝塞尔曲线
- T：smooth quadratic Bézier curveto curve 光滑二次贝塞尔曲线
- A：elliptical Arc 椭圆弧
- Z：closepath 闭合(将起点与终点连接)
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。Path是SVG中最复杂，也是功能最强大的图形，它可以绘制常规的直线，矩形，圆，也可以绘制地图，折线图等，D3提供api来生成d属性，例如：d3.line(),d3.area(),d3.geoPath()等。
viewBox
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
通俗点理解，就相当于屏幕截图，从(x,y)点开始截取width,height大的区域，这个区域会全屏显示，所以就出现了缩放效果
拿上面的例子来说，原本矩形的大小只有(20 * 15)在画布中不会呈现这么大，因为viewBox的存在，从(0, 0)开始截取了一个(40 * 30)的区域，这个区域正好包含矩形，然后截取区域再铺满画布就是这个效果。
下图是一个局部模拟截图：黑色边框表示截图区域。
总结
本章主要了解了一下svg基础知识，和一些常用形状。想要学习更多可以前往svg教程学习。从下一章开始，我们正式进入D3的世界。
