HTML5 中的可缩放矢量图形（SVG）-创建基本形状

look_w

创建基本形状对于 SVG 图形，需要使用 XML 标记来创建形状，表 1 给出了这些 XML 元素。
表 1. 创建 SVG 图形的 XML 元素元素描述line创建一条简单的线。polyline定义由多个线定义构成的形状。rect创建一个矩形。circle创建一个圆形。ellipse创建一个椭圆。polygon创建一个多边形。path支持任意路径的定义。
line 元素line 元素是基本的绘图元素。清单 2 展示了如何创建一条水平线。
清单 2. 创建一条水平线

1 2 3 4 5

<svg xmlns="http://www.w3.org/2000/svg" version='1.1' width="100%" height="100%" >    <line x1='25' y1="150" x2='300' y2='150'            style='stroke:red;stroke-width:10'/> </svg>

清单 2 中的代码会生成图 2 中的图形。
图 2. 基本的水平线根 SVG 标记具有宽度和高度属性，用于定义可用于绘制的画布区域。它们的原理类似于其他 HTML 元素的宽度和高度属性。在本例中，画布设置为占据所有可用空间。            
该示例还使用了 style 标记。SVG 图形支持使用多种方法设置其内容的样式。本文中的样式可用于使他们变得显眼，也可在必须使用某些属性（比如笔画颜色和宽度）才能渲染图像时使用。 中提供了有关设置 SVG 图形样式的更多信息。            
要创建一个线定义，可以定义相对于画布的开始和结束 x 和 y 坐标。x1 和 y1 属性是开始坐标，x2 和 y2 属性是结束坐标。要更改线的方向，只需更改这些坐标。例如，通过修改上一个示例，可以生成一条对角线，如清单 3 所示。            
清单 3. 创建一条对角线

1 2 3 4 5

<svg xmlns="http://www.w3.org/2000/svg" version='1.1' width="100%" height="100%" >     <line x1="0" y1="0" x2="200" y2="200"         style='stroke:red;stroke-width:10'/> </svg>

图 3 给出了清单 3 中的代码的结果。
图 3. 对角线polyline 元素多直线图形是一个由多个线定义组成的图形。清单 4 中的示例创建了一个类似一组楼梯的图形。            
清单 4. 创建多直线楼梯

1 2 3 4 5

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version='1.1'>    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"          style="fill:white;stroke:red;stroke-width:4"/> </svg>

清单 4 中的代码会生成图 4 中的图形。
图 4. 多直线楼梯要创建一个多直线图形，可以使用 points 属性并定义由逗号分隔的 x 和 y 坐标对。在本例中，第一个点定义为 0,40，其中 0 是 x 值，40 是 y 值。但是，单独一组点无法在屏幕上显示任何东西，因为这仅告诉 SVG 渲染器从何处开始。在最低限度上，您需要两组点：一个开始点和一个结束点（例如 points="0,40 40,40”）。            
与简单的线图形一样，这些线不需要完全水平或垂直。如果更改上一个示例中的值，如清单 5 所示，可以生成不规则的线形状。            
清单 5. 创建不规则的线

1 2 3 4 5

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version='1.1'>    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"          style="fill:white;stroke:red;stroke-width:3"/> </svg>

清单 5 中的代码会生成图 5 所示的图形。
图 5. 不规则线rect 元素创建一个矩形非常简单，只需定义宽度和高度，如清单 6 所示。
清单 6. 创建矩形

1 2 3 4 5

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version='1.1'>     <rect width="300" height="100"           style="fill:red"/> </svg>

清单 6 中的代码会生成图 6 中的图形。
图 6. 矩形您也可以使用 rect 标记创建一个正方形，正方形就是高和宽相等的矩形。            
circle 元素要创建一个圆，可以定义圆心的 x 和 y 坐标和一个半径，如清单 7 所示。
清单 7. 创建一个圆

1 2 3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="100" cy="50" r="40" fill="red"/> </svg>

清单 7 中的代码会生成图 7 中的图形。
图 7. 圆cx 和 cy 属性定义圆心相对于绘图画布的位置。因为半径是圆宽度的一半，所以在定义半径时，请记住图像的总宽度将是该值的两倍。