SVG 形状

– 矩形 <</span>rect>

– 圆形

– 椭圆

– 线

– 折线

– 多边形

– 路径
----------------------------------

 <</span>rect width="300" height="100"

  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度

• style 属性用来定义 CSS 属性

• CSS 的 fill 属性定义矩形的填充颜色（ rgb 值、颜色名或者十六进制值）

• CSS 的 stroke-width 属性定义矩形边框的宽度

• CSS 的 stroke 属性定义矩形边框的颜色

  <</span>rectx="50" y="20" width="150" height="150"

  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;

  stroke-opacity:0.9"/>

• x 属性定义矩形的左侧位置（例如， x="0" 定义矩形到浏览器窗口左侧的距离是 0px ）

• y 属性定义矩形的顶端位置（例如， y="0" 定义矩形到浏览器窗口顶端的距离是 0px ）

• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是： 0 - 1 ）

• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是： 0 - 1 ）

 <</span>rect x="50" y="20" width="150" height="150"

  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>

 <</span>rect x="50" y="20" rx="20" ry="20" width="150" height="150"

  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

-------------------------------------------

 

  stroke-width="2" fill="red"/>

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

• r 属性定义圆的半径

-----------------------------------------------

  rx="100" ry="50"

  style="fill:yellow;stroke:purple;stroke-width:2"/>

• CX 属性定义的椭圆中心的 x 坐标

• CY 属性定义的椭圆中心的 y 坐标

• RX 属性定义的水平半径

• RY 属性定义的垂直半径

-----------------------------------------------------------

 

  style="stroke:rgb(255,0,0);stroke-width:2"/>

• x1 属性在 x 轴定义线条的开始

• y1 属性在 y 轴定义线条的开始

• x2 属性在 x 轴定义线条的结束

• y2 属性在 y 轴定义线条的结束

---------------------------------------------------------------------

 

  style="fill:lime;stroke:purple;stroke-width:1"/>

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

• 多边形是由直线组成，其形状是 " 封闭 " 的（所有的线条 连接起来）。 polygon 来自希腊。 "Poly" 一位 "many" ， " gon " 意味 "angle".

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

----------------------------------------------------------

 

  style="fill:none;stroke:black;stroke-width:3" />

------------------------------------------------------------------

• 元素用于定义一个路径 。下面 的命令可用于路径数据 ：

• 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          封闭路径

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