SVG之基本形状

本文是自己学习SVG的笔记，通过对比Word的绘制形状的功能，总结在网页上通过SVG的实现的类似功能。下图是Word菜单中“插入”→“形状”出现的形状选项：

图形分为位图和矢量图。位图是基于颜色的描述，是由像素点组成的图像；而矢量图是基于数学矢量的描述，是由几何图元组成的图像，与分辨率无关。

可缩放矢量图形（Scalable Vector Graphics），即SVG，是一种用于描述基于二维的矢量图形的，W3C XML的分支语言之一。

线段

<line>标签用来创建线段。 需要4个属性定义一条线段：

• x1：线段起点的x坐标
• y1：线段起点的y坐标
• x2：线段终点的x坐标
• y2：线段终点的y坐标

代码

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg"><title></title>
	<line stroke="black" x1="50" x2="350" y1="50" y2="150">
</svg>

矩形

<rect>标签素会在屏幕上绘制一个矩形 。可以指定6个基本属性控制它在屏幕上的位置和形状。

• x：矩形左上角的x坐标
• y：矩形左上角的y坐标
• width：矩形的宽度
• height：矩形的高度
• rx：对于圆角矩形，圆角对应的椭圆在x方向上的半径
• ry：对于圆角矩形，圆角对应的椭圆在y方向上的半径

注意：如果只设置rx或ry任意一个，则另一个将默认相等。如果没有设置圆角，则默认为0。

代码：

圆和椭圆

<circle>标签会在屏幕上绘制一个圆形，它只有3个属性用来设置圆形：

r：圆的半径

cx：圆心的x坐标

cy：圆心的y坐标

注意：如果省略cx和cy，圆的中心会被设置为(0, 0)。

椭圆标签<ellipse>是圆<circle>更通用的形式，属性有4个：

cx：圆心的x坐标

cy：圆心的y坐标

rx：椭圆水平半径

ry：椭圆垂直半径

代码：

折线

<polyline>标签在屏幕上绘制一组连接在一起的直线。它可以有很多的点，折线的所有点位置都放在一个points属性中：

points：此属性定义构成折线的一系列的点，每一个点由两个用逗号分隔的数字构成，第一个数字表示x轴坐标，第二个数字表示y轴坐标，点与点之间用空格分隔。

代码

多边形

多边形<polygon>和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。

代码

发布时间：2019/3/29 下午11:19:44  阅读次数：3042