HTML5|SVG形状

SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

矩形

• 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 属性可使矩形产生圆角。

椭圆

• cx 属性定义圆点的 x 坐标
• cy 属性定义圆点的 y 坐标
• rx 属性定义水平半径
• ry 属性定义垂直半径

线

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

多边形

标签用来创建含有不少于三个边的图形。

• points属性定义多边形每个角的 x 和 y坐标

折线

路径

SVG中的路径概念可以是一个形状的外框，也可以是用来裁剪的线条，这个线条可以被描边，封闭时还可以被填充。

路径和折线或多边形不同之处在于，路径可以是直线也可以曲线，因此使用路径可以构造更为复杂的几何图形。

path 标签用来创建一条路径，路径元素的基本属性是路径数据，用 d='path data'语法来定义。路径数据中包含了点集和绘制指令。

点集就是一组“x y”格式的坐标，以空格隔开，以指令字母开头。指令可以有如下几种：
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关闭路径

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在250 150 关闭路径。