格式条款_HTML5(七)——SVG基础入门

免责声明：虽然SVG也是一个标签，但它不是HTML5。 HTML5 添加到标题中只是为了将其放在一起。

1. 为什么要学习SVG？

SVG 代表可缩放矢量图形 ( )，使用 XML 格式来定义矢量图形。其他图像格式都是基于像素的，但 SVG 没有单位的概念。它的20只代表20乘以1，因此SVG绘制的图形在放大或缩小时不会变形。

与其他图像相比，SVG 的优点如下：

SVG 可以通过多种工具读取和修改。 SVG 比其他图像格式更小且更易于压缩。 SVG 是可扩展的。 SVG 图像可以自由地以高质量打印。 SVG 图像可以添加文本和事件，并且可以搜索，因此适合地图。 SVG 是纯 XML，而不是 HTML5。 SVG 是 W3C 标准 2. SVG 形状元素

2.1. svg标签

SVG代码全部放在svg标签中。 SVG中的标签都是闭合标签，与html中标签的用法一致。 svg的属性有：

例如：画一条直线，完整代码如下：

上面的svg设置的宽度和高度没有单位。默认值为像素值。如果需要添加单位，除了绝对单位外，还可以设置相对单位。

使用语法：

四个参数分别是左上角的水平和垂直坐标以及视口的宽度和高度。表示仅查看 SVG 的某一部分，由上述四个参数决定。

使用后相当于svg整体大小保持不变，只能看到设置部分，视觉上被放大了。

2.2.如何将 SVG 嵌入 HTML

SVG代码可以直接嵌入到html页面中，也可以通过html embed嵌入到html中。嵌入时，嵌入SVG文件，并且SVG文件必须使用.svg后缀。介绍一下每种方法的使用方法？

2.2.1.嵌入：

使用语法：

src 是 SVG 文件路径，type 表示嵌入引入的文件类型。

优点：受所有浏览器支持并允许编写脚本。

缺点：不建议在html4和html中使用，但html5支持。

2.2.2.嵌入：

使用语法：

data 是 SVG 文件路径，type 表示导入的文件类型。

优点：所有浏览器都支持，支持html、html4和html5。

缺点：不允许编写脚本。

2.2.3.嵌入：

使用语法：

src 是 SVG 文件路径、宽度、设置大小和边框。

优点：所有浏览器都支持并允许编写脚本。

缺点：不建议在html4和html中使用，但html5支持。

2.2.4.嵌入html：

svg标签直接插入到html内容中，使用方式与其他标签相同。

2.2.5。连接到 svg 文件：

使用 a 标签直接链接到 SVG 文件。

使用语法：查看 SVG

3.SVG形状元素

3.1、线线

使用语法：

使用line标签创建一条线，(x1,y1)为起点，(x2,y2)为终点，画一条黑色线，-width为线宽。

3.2.矩形-矩形

//使用语法：

上面的参数width和是必需参数，x和y是可选参数。如果不设置，默认为(0,0)，表示从svg的左上角开始绘制。 rx 和 ry 是可选参数。如果未设置，矩形将不会有圆角。 fill 定义填充颜色。

3.3.圆圈-

// 使用语法

上面的(cx,xy)定义了圆心的位置，是一个可选参数。如果未设置，则默认圆心为 (0,0)。 r 是必需参数，设置圆的半径。

3.4.椭圆-

椭圆与圆类似，不同之处在于椭圆具有不同的 x 和 y 半径，而圆则具有相同的两个半径。

// 使用语法

上述椭圆的两个半径 rx 和 ry 是必需参数。如果rx=ry，则表示是一个圆。 (cx,cy)是椭圆的中心，这是一个可选参数。如果未设置，则默认圆心为 (0,0)。

3.5.折线 -

// 使用语法

上述代码执行结果如图：

需要注意的是，包含多个点的坐标，但不是数组。

3.6.多边形-

标签用于创建不少于3条边的图形，并且多边形是闭合的，即所有线都是相连的。

// 使用语法

绘制时，它类似于折线，但它会自动闭合，而折线则不会。

3.7.路径-路径

路径是 SVG 基本形状中最强大的。它不仅可以创建其他基本形状，还可以创建更多其他形状，例如贝塞尔曲线、二次曲线等。