svg学习笔记

standalone：规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用，standalone=“no” 意味着 SVG 文档会引用一个外部文件
version：定义所使用的 SVG 版本
xmlns：定义 SVG 命名空间
SVG 文件可通过以下标签嵌入 HTML 文档：
<embed>、<object> 或者 <iframe>
SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件
SVG有一些预定义的形状元素：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

---

rect

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了整个元素的透明值 (范围: 0 到 1)
rx 和 ry 属性可使矩形产生圆角

---

circle

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

---

ellipse

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

---

line

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

---

polygon

points 属性定义多边形每个角的 x 和 y 坐标
fill-rule：指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）
nonzero：字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部

evenodd：字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部

---

polyline

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

---

path

下面的命令可用于路径数据：

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
A = elliptical Arc
Z = closepath
//以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过 元素来引用它们。

---

text

transform：形变，与css属性类似。
transform=“rotate(angle,[centerX, centerY])”
默认以坐标系中(0,0)原点为圆心，顺时针旋转angle度。0度为水平从左向右方向。
元素可以安排任何分小组与 元素的数量。每个 元