HTML5的SVG绘图笔记2：绘制SVG基本图形

绘制矩形

rect元素用来创建矩形及其各种变化。

<rect x="" y="" rx="" ry="" width="" height="" style=" " />

例子

<svg>
 <rect height="200" width="200" style="fill:brown"></rect>
</svg>

绘制直线

line元素用来创建直线，这个直线实际是线段（线条），需要定义起点和终点，语法格式如下。

<line x1="" y1="" x2="" y2="" style=""/>

例子

<svg>
 <line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="2"></rect>
</svg>

绘制圆形

circle元素可用来创建一个圆.

<circle cx="" cy="" r="" style=""/>

其中，r为圆的半径，cx、cy是圆心的横坐标和纵坐标，style用于定义圆的样式。

例子

<svg>
 <circle cx="40" cy="60" r="30" style="stroke:black;fill:goldenrod"></circle>
</svg>

绘制椭圆

ellipse元素可用来创建椭圆，绘制椭圆的语法格式如下：

<ellipse cx="" cy="" rx="" ry="" style=""/>

椭圆与圆属性的不同之处在于横轴半径rx和纵轴半径ry，而圆形只有半径r。

例子

<svg>
 <ellipse cx="160" cy="80" rx="120" ry="60" style="stroke:black;fill:brown"></ellipse>
</svg>

绘制折线

polyline元素可创建仅包含直线的形状.

<polyline points=" " style="">

折线主要定义每条线段的端点即可，所以只需要一个点的集合points作为参数。points是一系列用空格，逗号，换行符等分隔开的点。

例子

<svg>
 <polyline points="20   50,100   150,140  70"  stroke="black" fill="none" stroke-width="2"></polyline>
</svg>

绘制多边形

polygon元素用来创建含有不少于三个边的图形。

<polygon points=" " style="">

例子

<svg>
 <polygon points="20   50,100   150,140  70,80  20"  stroke="black" stroke-width="2"></polygon>
</svg>

绘制路径

绘制文本

SVG中，使用text元素输出文本.

<text x="" y="" text-anchor="middle" style="">

例子

<svg>
 <text x="40" y="20"style="fill:firebrick">SVG SVG SVG SVG</text>
</svg>

绘制图形

SVG使用image元素显示外部图片，其语法格式如下：

<image x="" y="" xlink:href =" " height ="" width ="" />

例子

<svg width="400" height="400">
<image x="10" y="20" xlink:href="http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg" height="400" width="400"/>
</svg>

SVG绘图的属性

fill属性

用于设置图形内部的填充颜色，直接将颜色值赋给该属性即可。例如，

fill= "yellow";

stroke属性

用于设置绘制图形的边框颜色，直接为其赋颜色值即可。例如，

stroke= "#f00";

stroke-width属性

用于定义图形边框的宽度，默认1像素，数值越大，边框越粗。例如，

stroke-width="rgb(100%,50%,50%)";

stroke-linecap属性

定义线段端点的风格，即线帽的形状。

stroke-linejoin属性

该属性定义了线段连接处的风格。

stroke-dasharray属性

stroke-dasharray属性用于绘制虚实线，其格式如下。

stroke-dasharray="value,value,……"