3. svg学习笔记-基本形状和画笔属性

时间:2021-07-11 04:31:17

svg中可以绘制的基本图形有线段,矩形,多边形,圆,椭圆,分别来看一下这些基本图形:

线段

使用<line>元素创建一条线段,格式如下:

<line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black">

其中start-x和start-y为线段起点的x,y坐标,end-x和end-y为线段结束点的x,y坐标。

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000000">
<line x1="10" y1="10" x2="200" y2="200" stroke="black">
</line>
</svg>
</body>
</html>

以上代码在浏览器中显示如下:

3. svg学习笔记-基本形状和画笔属性

以上代码中<line>元素除了自身的基本属性之外还有个stroke属性,此属性用来指定基本图形的轮廓颜色,若不指定,默认为none,即在浏览器中无法看到所绘制的图形。除此之外,类似的属性还有stroke-width,stroke-opacity,stroke-dasharray,fill等,此类属性以后本文结尾时会详解,此处只是用来将图形显示出来

矩形

使用<rect>元素绘制一个矩形,格式如下:

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h"></rect>

其中x,y属性为矩形左上角顶点的x,y坐标,width和height分别指定矩形的宽高

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="100" height="60" stroke="black" fill="none">
</rect>
</svg>
</body>
</html>

在浏览器中呈现如下:

3. svg学习笔记-基本形状和画笔属性

圆角矩形

圆角矩形也使用<rect>元素创建,只不过额外指定了两个属性,格式如下:

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h" rx="rx" ry="ry">
</rect>

属性rx和ry分别指定了x方向和y方向的圆角半径,示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="60" stroke="black" fill="none">
</rect>
</svg>
</body>
</html>

在浏览器中呈现如下:

3. svg学习笔记-基本形状和画笔属性

将以上代码中的svg部分代码改为下面的代码:

<svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="10" stroke="black" fill="none">
</rect>
</svg>

在浏览器中呈现如下:

3. svg学习笔记-基本形状和画笔属性

在svg中使用<circle>元素创建一个圆,格式如下:

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

cx和cy分别指定了圆心坐标的x和y,r元素指定了圆的半径。示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<circle cx="100" cy="100" r="60" stroke="black" fill="none">
</circle>
</svg>
</body>
</html>

在浏览器中呈现如下:

3. svg学习笔记-基本形状和画笔属性

椭圆

在svg中创建椭圆使用<ellipse>元素,只不过椭圆有两个半径,水平方向上的和垂直方向上的,格式如下:

<ellipse cx="circle-x" cy="circle-y" rx=" x-radius " ry="y-radius"></ellipse>

其中cx和cy为椭圆的圆心,rx和ry为水平方向和垂直方向上的半径。示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<ellipse cx="100" cy="100" rx="60" ry="90" stroke="black" fill="none">
</ellipse>
</svg>
</body>
</html>

在浏览器中呈现如下:

3. svg学习笔记-基本形状和画笔属性

多边形

svg中最有魅力的就是多边形和路径了,CSS3再牛逼也没有办法像svg一样如此简单的创建一个任意的多边形,在svg中通过<polygon>元素创建一个多边形,格式如下:

<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polygon>

通过为points属性指定多个坐标点来创建一个多边形,坐标点之间以空格或者逗号隔开,指定坐标时不需要指定返回起始坐标,图形会自动闭合。

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<polygon points="10,150 30,40 170,50 10,20" stroke="black" fill="none">
</polygon>
</svg>
</body>
</html>

在浏览器中下呈现如下:

3. svg学习笔记-基本形状和画笔属性

折线

绘制折线的时候可以通过一系列的<line>元素来创建,但是这样做会加大阅读的难度,不利于代码的维护,所以可以通过另一种方法来创建折线,那就是<polyline>元素,格式如下:

<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polyline >

其中的point元素指定的也是坐标点,点之间以空格或者逗号隔开,示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black">
<polyline points="23.5,45 58.2,87.63 34,23.4 200,210" stroke="black" fill="none"></polyline>
</svg>
</body>
</html>

浏览器中打开如下:

3. svg学习笔记-基本形状和画笔属性

画笔属性

stroke:画笔的颜色,默认为none

stroke-width:画笔的宽度,默认为1

stroke-opacity:画笔颜色的透明度,取值为0到1之间的数值,0为完全透明,1为完全不透明,默认为1

stroke-dasharray:指定一个数值序列来表示虚线的长度和虚线中间空隙的长度

stroke-linecap:线头尾的形状,值为butt,round或者square

stroke-linejoin:图形的棱角或者一系列连线的形状,取值为miter(尖的,默认值),round或者bevel(平的)

stroke-miterlimit:相交处显示宽度与线宽的最大比例,默认值为4

fill:指定图形的填充颜色,默认值为black

fill-opacity:填充的透明度,取值范围为0~1之间的数值,0为完全透明,1为完全不透明,默认值为1

fill-rule:填充的规则,取值为nonzero(默认值)或者evenodd