使用SVG绘制矩形、圆形和椭圆。SVG有一些开发人员可以使用的预定义形状元素。这些元素分别是矩形、圆圈、椭圆椭圆、折线线、折线折线、多边形多边形、路径路径。让我们先学习如何绘制矩形。绘制矩形使用的是rect标签，它是rectangle的缩写，意思是长方形。它是一个单一的标签，基本语法是：caretrect,slashcaret。请注意，对于任何HTML单个标签，您都可以在第二个喇叭前写一个斜杠，以表示该标签已关闭。也就是说，用闭合标签来表示单个标签，其实是比较严谨的。它有几个重要的属性：width，定义了矩形的宽度，值为一个数字。height，定义矩形的高度，值也是一个数字。fill，定义矩形的填充颜色，值可以是任何合法的颜色值，例如颜色名称，rgb颜色值，十六进制颜色值等。stroke-width，描边宽度，定义矩形的边框宽度,值为一个数字。strokestroke定义矩形边框的颜色。让我们举个例子。打开编辑器，新建一个rect_circle_ellipse.html文件，完成基本代码，在body中添加svg标签，定义属性width为400，height为110。在svg中添加rect标签，定义属性width等于300，高度等于100，填充颜色填充值为blue，蓝色，stroke-width笔划宽度属性值为3，stroke笔划属性值为black，黑色。保存文档。在浏览器中预览，绘制了一个矩形。下面我们来学习几个矩形的属性：width，定义了矩形的宽度，值为一个数字。x,定义矩形的左边位置，值为一个数字。y，定义矩形的顶部位置，值为数字。fill-opacity，定义填充颜色的不透明度，合法取值范围是0到1。stroke-opacity，定义描边颜色的不透明度，合法取值范围是0到1。回到编辑器，添加一个br标记在前一个svg的末尾。回车和换行。添加一个新的svg标签，其属性宽度等于400，高度等于180。在svg中添加一个rect标签，属性x等于50，y等于20，width等于150，height等于150，fill等于blue，stroke等于tomato，stroke-width等于5、fill-opacity等于0.1，stroke-opacity等于0.9。节省。回到浏览器，刷新，绘制出一个边长150，背景色为蓝色，描边为番茄色，具有一定透明度的矩形。仔细看，背景透明度高，边框透明度低，它们的透明度值分别为0.1和0.9。这意味着：透明度的值越小，透明度越高。如果值为0，则完全透明。我们也可以为rect定义一个opacity属性来设置整个元素的opacity值，合法取值范围也是0到1。回到编辑器，我们去掉这个矩形的fill-opacity和stroke-opacity属性，并定义值为0.5的不透明度属性。节省。回到浏览器，刷新，整个矩形透明0.5，也就是描边和背景都透明50%。最后，让我们画一个圆角矩形。圆角矩形是通过为rect定义rx和ry两个属性来实现的。rx，定义圆角在x轴方向的半径长度，值为数字。ry，定义圆角在y轴方向的半径长度，值为数字。如果两个值相等，则为圆角，如果两个值不相等，则为椭圆角。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于400，height等于180。在svg里面添加一个rect标签，属性x等于50，y等于20，width等于150，height等于150，填充等于红色，描边等于黑色，描边宽度等于5，不透明度等于0.5。最后加上rx等于20和ry等于20到rect。节省。回到浏览器，刷新，一个圆角矩形就做好了。回到编辑器，如果把ry改成30.保存。回到浏览器，刷新，矩形的四个角变成了椭圆形。接下来，我们学习画圆。要绘制圆，请使用circle标签，circle表示圆。它是一个单一的标签，基本语法是：caretcircle,slashcaret。它具有三个重要的属性：cx和cy属性，它们定义了圆心的x和y坐标。如果省略cx和cy，则圆心设置为(0,0)。r属性，定义圆的半径。就像画一个矩形一样，通过定义stroke、stroke-width、fill属性来设置边框颜色、边框宽度、背景色填充等。提醒一下，stroke、stroke-width、fill这三个属性可以用于普通的图形绘制。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于100，height等于100。在svg中添加一个circle标签，属性cx等于50，cy等于50，r等于40，stroke等于black，stroke-width等于3，fill等于red。节省。回到浏览器，刷新，一个圆就画出来了。最后，我们学习画椭圆。使用ellipse标签绘制一个椭圆，ellipse表示椭圆。它是一个单一的标签，基本语法是：caretellipse,slashcaret。椭圆与圆密切相关。区别在于椭圆的x和y半径不同，而圆的x和y半径相等。ellipse有四个重要的属性：cx属性，它定义了椭圆中心的x坐标。cy属性定义椭圆中心的y坐标。rx属性定义水平半径。ry属性定义垂直半径。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于140，height等于500。在svg中添加一个椭圆标签，属性cx等于200，cy等于80，rx等于100，ry等于50，fill等于黄色，stroke等于紫色，stroke-width等于2。保存。回到浏览器，刷新，一个椭圆就画出来了。回到编辑器中，我们绘制三个堆叠的椭圆。在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，其属性宽度等于150，高度等于500。在svg中添加一个椭圆标签，属性cx等于240，cy等于100，rx等于220，ry等于30，fill等于紫色。再添加一个椭圆标签，属性cx等于220，cy等于70，rx等于190，ry等于20，fill等于lime。再添加一个椭圆标签，属性cx等于210，cy等于45，rx等于170，ry等于50，fill等于黄色。节省。回到浏览器，刷新，三个缩小堆叠的椭圆就做好了。仔细观察会发现三个省略号的堆叠顺序并不是HTML的书写顺序。这是因为它们的位置和大小是由cx、cy、rx、ry决定的，而不是由html的书写顺序决定的。根据这个特点，我们可以组合多个椭圆。回到编辑器，在最后一个svg的末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于100，height等于500。在svg中添加一个椭圆标签，属性cx等于240，cy等于50，rx等于220，ry等于30，填充等于黄色。再添加一个椭圆标签，属性cx等于220，cy等于50，rx等于190，ry等于20，fill等于white。节省。回到浏览器，刷新，视觉上，一个空心的椭圆就画出来了。文章配套视频链接https://www.bilibili.com/video...
