如何在html5中使用svg_HTML5——SVG基础入门.docx

第 1 页（共 5 页） HTML5 - SVG 基本介绍 免责声明：虽然 SVG 也是一个标签，但它不是 HTML5。 HTML5 添加到标题中只是为了将其放在一起。 SVG表示可缩放矢量图形（cs），使用XML格式来定义矢量图形。其他图像格式都是基于像素的，但 SVG 没有单位的概念。它的20只代表20乘以1，因此SVG绘制的图形在放大或缩小时不会变形。与其他图像相比，SVG 的优点如下： SVG 可以通过多种工具读取和修改。 SVG 比其他格式更小且更易于压缩。 SVG 可以随意缩放。 SVG 图像可以以任何高质量打印。 SVG 图像可以添加文本和事件，并且可以搜索，因此适合地图。 SVG 是纯 XML，而不是 HTML5。 SVG是W3C标准2.1，svg标签。 SVG的代码放在svg标签中。 SVG中的标签都是闭合标签，所有标签都在html中使用。第 2 页，共 5 页。 svg的属性有：width和，指定svg的大小。例如：画一条直线。完整代码如下： 上面的svg设置的宽度和高度没有单位。此时默认的是像素值。如果需要添加单位，除了绝对单位外，还可以设置相对单位。属性使用语法：四个参数分别是左上角的横纵坐标和视口的宽高。

表示只查看SVG的某一部分，由上述四个参数计算得出。使用后相当于svg整体大小保持不变，只能看到设置部分，视觉上被放大了。 2.2.如何嵌入SVG代码？可以直接嵌入到html页面中，也可以通过html embed嵌入到html中。嵌入时，嵌入SVG文件，并且SVG文件必须使用.svg后缀。各种方法如何分别使用？ 2.2.1.嵌入： 使用语法： . Page 3 of 5 src 是SVG文件路径，type表示embed引入的文件类型。优点：受所有浏览器支持并允许使用脚本。缺点：不建议在html4和html中使用，但html5支持。 2.2.2.嵌入：使用语法：data是SVG文件路径，type表示导入的文件类型。优点：所有浏览器都支持，支持html、html4和html5。缺点：不允许使用脚本。 2.2.3.嵌入：使用语法：src 是 SVG 文件路径、宽度、设置大小和边框。优点：受所有浏览器支持并允许使用脚本。缺点：不建议在html4和html中使用，但html5支持。

.第 4 页，共 5 页 2.2.4。嵌入html：svg标签直接插入到html内容中，与其他标签一起使用。 2.2.5。连接到 SVG 文件：使用 a 标签直接链接到 SVG 文件。使用语法：查看SVG3.1，line -line 使用line标签创建一条线，(x1,y1)为起点，(x2,y2)为终点，画一条黑色线，-width为线宽。 3.2.矩形-矩形 上面的参数width和rect是必需参数，x和y是可选参数。如果不设置，默认为(0,0)，从svg的左上角开始绘制。 rx 和 ry 是可选参数。如果未设置，矩形将不会有圆角。 fill 定义填充颜色。 3.3. - 上面的(cx,xy)定义了圆心的位置，这是一个可选参数。如果未设置，则默认圆心为 (0,0)。 r 是必需参数，设置圆的半径。 3.4.椭圆 - 第 5 页，共 5 页 椭圆与圆形类似。不同之处在于椭圆的 x 和 y 半径不同，而圆的两个半径相同。上述椭圆的两个半径rx和ry是必需参数。如果rx=ry，则表示是一个圆。 (cx,cy)是椭圆的中心，这是一个可选参数。如果未设置，则默认圆心为 (0,0)。 3.5. - 上面代码的执行结果需要注意的是，它包含多个点的坐标，但它不是一个数组。 3.6.多边形标签用于创建不少于 3 个边的图形。多边形是封闭的，即所有的线都是相连的。绘制时，它类似于折线，但它会自动闭合，而折线则不会。 3.7.路径 - 是 SVG 基本形状中最强大的。它不仅可以创建其他基本形状，还可以创建更多其他形状，例如贝塞尔曲线、二次曲线等。