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度为水平从左向右方向。
元素可以安排任何分小组与