SVG中常用基本形状教程

时间:2022-11-20 18:27:44

SVG的基础形状矩形(rect)、圆(circle)、椭圆(ellipse)、线段(line)、折线(polyline)和多边形(polygon),本文介绍了SVG中这些常用基本形状的语法及教程。

一、矩形<rect>

矩形<rect>标记允许你创建矩形或它的变体,比如正方形,圆角矩形等。语法如下:

<rect x="80" y="53" width="189" height="52" style="fill:rgb(39,44,231); stroke:rgb(0, 0,128); stroke-width:1"/>

x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标,缺省值为 0;

y属性定义了矩形左上角顶点在用户坐标系 Y轴上的坐标,缺省值为 0;

width和 height属性定义了矩形的宽度和高度,其中任意一个值为 0,矩形都不显示style属性允许我们定义 SVG推荐标准支持的 CSS样式属性。

fill 属性定义了长方形的填充颜色,这里采用的是 rgb 的格式,SVG 也支持颜色名和 16进制的颜色格式,比如:fill:red或 fill:#ff0000。

比如将填充红色,可以用fill=”red” 或用 fill=”rgb(255,0,0)” 亦或用 fill=”#ff0000”。

stroke属性定义边框线,SVG中,如果不定义,边框线没有任何宽度,换句话说,SVG默认边框线宽度为 0,对所有的 SVG的形状都是这样的。

如果需要定义边框线的话,采用这样的确语法格式:stroke:rgb(0,0,128)定义颜色,stroke-width:1定义宽度

我门还可以改变填充颜色的透明度,可以这样写:fill-opacity: 0.1,透明度范围是从 0到 1
也可以定义整个元素的透明度,opacity:0.5,该透明度对填充和边框线都有效
也可以单独定义边框线的透明度:stroke-opacity:0.8

定义圆角矩形,使用 rx,ry属性定义圆角的半径。

rx定义圆角矩形的椭圆角在X方向的半轴长度。如果rx的值大于矩形宽度的一半,则取值矩形宽度的一半。

ry定义圆角矩形的椭圆角在Y方向的半轴长度。如果ry的值大于矩形高度的一半,则取值矩形高度的一半。

二、圆<circle>

圆<circle>要定义一个圆,只需要指顶圆心的坐标、半径即可,也可使用样式单属性定义外观的样式,语法如下:

circle cx="143" cy="163" r="84" style="fill:rgb(192,192,255); stroke:rgb(0,0,128); stroke-width:1"/>

其属性定义如下:

cx:是圆心在用户坐标系中的X坐标值,缺省值为0.

Cy:是圆心在用户坐标系中的Y坐标值,缺省值为0.

r:是圆的半径,不允许为负数。如果是0,则圆形不显示。

三、椭圆<ellipse>

椭圆<ellipse>定义椭圆和定义圆很相象,指定圆心,X,Y轴的半径即可。语法如下:

<ellipse cx="160" cy="163" rx="101" ry="81" style="fill:rgb(192,192,255);stroke:rgb(0,0,128);stroke-width:1"/>

其常用属性定义如下:

cx:是椭圆中心在用户坐标系中的X坐标值,缺省值为0。

cy:是椭圆中心在用户坐标系中的Y坐标值,缺省值为0。

rx:是X方向上椭圆的半轴长,不允许为负数。如果是0,则椭圆不显示。

ry:是Y方向上椭圆的半轴长,不允许为负数。如果是0,则椭圆不显示。

四、线段<line>

线段<line>通过指定开始点 (x1,y1)、结束点(x2,y2)和宽度 stroke定义一条直线。如:

<line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0,0,0);stroke-width:2"/>

要想得到很细的线,可以指定 stroke-width为大于 0小于 1的数值。

其常用属性定义如下:

X1:是线段起点的X坐标值,缺省值为0。

yl:是线段起点的Y坐标值,缺省值为0。

x2:是线段终点的X坐标值,缺省值为0。

y2:是线段终点的Y坐标值,缺省值为0。

五、折线<polyline>

折线<polyline>这个标记通过指定各个点的坐标,来定义一条折线,格式如下:

<polyline points="100,200 100,20 10,200 100,20" style="stroke:rgb(64, 64, 64);stroke-width:1"/>

其主要属性为points:

points:表示折线各顶点坐标的一个列表,顶点坐标的格式为”x,y,其中x表示顶点的横坐标、x表示顶点的纵坐标,不同顶点坐标之间用空格分开。绘图程序将按照points中的顶点依次绘制图形。

六、多边形<polygon>

多边形<polygon>这个标记用来指定连续的点的坐标来,定义多边形。语法如下:

<polygon points="223.5,123.034 276,213.966 171,213.966" style="fill:rgb(126,14,83);stroke:rgb(0,0,128);stroke-width:1"/>

其主要属性为points
points:points的取值与折线的points一样,但是在绘制多边形的时候,绘图程序不但按照points中的顶点依次绘制图形,而且还将最后一个顶点与第一个顶点连接起来构成一个封闭图形。

注:在 SVG中,允许使用浮点数来达到精确控制。