共计 3089 个字符，预计需要花费 8 分钟才能阅读完成。
应用 SVG 绘制矩形、圆形和椭圆形。
SVG 有一些预约义的形态元素，能够供开发者应用。
这些元素别离是矩形、圆形 circle、椭圆 ellipse、线条 line、多线条 polyline、多边形 polygon、门路 path。
咱们先来学习矩形的绘制。绘制矩形应用 rect 标签，它是 rectangle 的缩写，就是矩形的意思。它是一个单标签，根本语法为：尖角号 rect，斜线尖角号。留神，任何一个 HTML 单标签，都能够在第二个尖角号前写一个斜线，示意标签闭合了，也就是说，用闭合标签来示意单标签，其实这样写更加谨严。
它有几个重要的属性：width，定义矩形的宽度，值是一个数字。height，定义矩形的高度，值也是一个数字。fill，定义矩形的填充色彩，值能够是任意非法的色彩值，比方色彩名称，rgb 色彩值，十六进制色彩值等。stroke-width，笔画宽度，定义了矩形的边框宽度，值是一个数字。stroke，描边，定义矩形边框的色彩。
咱们来举个例子。关上编辑器，创立一个 rect_circle_ellipse.html 文件，补全根底代码，在 body 里增加一个 svg 标签，定义属性 width 等于 400，height 等于 110。在 svg 里增加 rect 标签，定义属性 width 等于 300，height 等于 100，fill 色彩填充值为 blue，蓝色，stroke-width 笔画宽度属性值为 3，stroke 描边属性值为 black，彩色。保留文件。在浏览器中预览，一个矩形就绘制好了。
再来学习几个矩形的属性：width，定义矩形的宽度，值是一个数字。x，定义矩形的右边地位，值是一个数字。y，定义矩形的顶部地位，值是一个数字。fill-opacity，定义填充色彩的不透明度，非法值的范畴是 0 到 1。stroke-opacity，定义描边色彩的不透明度，非法值的范畴是 0 到 1。
回到编辑器，在上个 svg 结尾处增加一个 br 标签。回车换行。增加一个新的 svg 标签，属性 width 等于 400，height 等于 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 属性，用来设置整个元素的不透明度值，非法值的范畴也是 0 到 1。
回到编辑器，咱们去掉这个矩形的 fill-opacity 和 stroke-opacity 属性，定义一个 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，fill 等于 red，stroke 等于 black，stroke-width 等于 5，opacity 等于 0.5。最初给 rect 增加 rx 等于 20，ry 等于 20。保留。
回到浏览器，刷新，一个圆角矩形做好了。返回编辑器，如果将 ry 改为 30。保留。
回到浏览器，刷新，矩形的四个角就变成椭圆形了。
接下来，咱们学习绘制圆形。绘制圆形应用 circle 标签，circle 就是圆的意思。它是一个单标签，根本语法为：尖角号 circle，斜线尖角号。它有三个重要的属性：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 就是椭圆的意思。它是一个单标签，根本语法为：尖角号 ellipse，斜线尖角号。椭圆与圆密切相关。
不同的是，椭圆的 x 和 y 半径是不同的，而圆的 x 和 y 半径是相等的。ellipse 有四个重要的属性：cx 属性，定义椭圆核心的 x 坐标。cy 属性，定义椭圆核心的 y 坐标。rx 属性，定义程度半径。ry 属性，定义垂直半径。回到编辑器，在上个 svg 结尾处增加一个 br 标签。
回车换行。增加一个新的 svg 标签，属性 width 等于 140，height 等于 500。在 svg 外面增加一个 ellipse 标签，属性 cx 等于 200，cy 等于 80，rx 等于 100，ry 等于 50，fill 等于 yellow，stroke 等于 purple，stroke-width 等于 2。保留。
回到浏览器，刷新，一个椭圆形就绘制好了。返回编辑器，咱们绘制三个重叠的椭圆。在上个 svg 结尾处增加一个 br 标签。回车换行。增加一个新的 svg 标签，属性 width 等于 150，height 等于 500。
在 svg 外面增加一个 ellipse 标签，属性 cx 等于 240，cy 等于 100，rx 等于 220，ry 等于 30，fill 等于 purple。再增加一个 ellipse 标签，属性 cx 等于 220，cy 等于 70，rx 等于 190，ry 等于 20，fill 等于 lime。再增加一个 ellipse 标签，属性 cx 等于 210，cy 等于 45，rx 等于 170，ry 等于 50，fill 等于 yellow。保留。
回到浏览器，刷新，三个逐步放大的重叠椭圆就做好了。仔细观察发现，三个椭圆的重叠程序并不是 html 的书写程序。这是因为他们的地位和大小是由 cx, cy, rx, ry 来决定的，不是由 html 书写程序来决定的。
依据这个特点，咱们能够将多个椭圆组合起来。返回编辑器，在上个 svg 结尾处增加一个 br 标签。回车换行。增加一个新的 svg 标签，属性 width 等于 100，height 等于 500。
在 svg 外面增加一个 ellipse 标签，属性 cx 等于 240，cy 等于 50，rx 等于 220，ry 等于 30，fill 等于 yellow。
再增加一个 ellipse 标签，属性 cx 等于 220，cy 等于 50，rx 等于 190，ry 等于 20，fill 等于 white。保留。回到浏览器，刷新，视觉上看，一个空心的椭圆就绘制好了。
文章配套视频链接 https://www.bilibili.com/vide…