前端技术之SVG图片（图标）创建
0.SVG预备知识
SVG是什么
-
SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不会有所损失 SVG 是W3C推荐的 SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体
SVG的优势
-
SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可缩放的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） SVG 是开放的标准 SVG 文件是纯粹的 XML
1. SVG基本形状
svg有一些预定义的形状元素
-
矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
</body>
</html>
呈现效果：
2. 理解坐标体系
和html文档的定位方式一样，但是注意和three.js的坐标不一样！
3. 形状的元素解析
公共：
x/y， cx/cy: 起点或者中心点的坐标
fill: 填充颜色
fill-opacity: 填充的透明度
stroke: 边框颜色
stroke-opacity 控制描边的不透明度（范围：0 - 1） stroke-width 定义矩形边框的宽度
矩形rect：
width: 宽度 height：高度， rx/ry: 圆角的x/y方位半径
园circle：
r: 园的半径
椭圆ellipse：
rx/ry: 水平/垂直半径
线段line
x1/y1: 起点位置， x2/y2：终点位置
折线polyline
点的坐标集合
多边形polygen
最后一个点自动回到起始点
路径path
最为强大，由“命令+参数”构成序列
命令字包括：
-
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath
注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
