电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: HTML5 中的可缩放矢量图形（SVG）- 向网页添加 SVG XML [打印本页]

作者: look_w 时间: 2018-10-17 19:24 标题: HTML5 中的可缩放矢量图形（SVG）- 向网页添加 SVG XML

向网页添加 SVG XML创建 SVG XML 之后，可采用多种方式将它包含在 HTML 页面中。第一种方法是直接将 SVG XML 嵌入到 HTML 文档中，如清单 20 所示。
清单 20. 直接将 SVG XML 嵌入 HTML 文档

1
2
3
4
5
6
7
8
9
10

<html>
   <head>
         <title>Embedded SVG</title>
   </head>
   <body style="height: 600px;width: 100%; padding: 30px;">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                  <circle cx="100" cy="50" r="40" fill="red"/>
            </svg>
   </body>
</html>

此方法可能最简单，但它不支持重用。请记住，可以使用 .svg 扩展名保存 SVG XML 文件。当将 SVG 图形保存在 .svg 文件中时，您可以使用 embed、object 和 iframe 元素来将它包含在网页中。清单 21 显示了使用 embed 元素包含 SVG XML 文件的代码。
清单 21. 使用 embed 元素包含一个 SVG XML 文件

1	<embed src="circle.svg" type="image/svg+xml" />

清单 22 显示了如何使用 object 元素包含一个 SVG XML 文件。
清单 22. 使用 object 元素包含一个 SVG XML 文件

1	<object data="circle.svg" type="image/svg+xml"></object>

清单 23 给出了使用 iframe 元素包含一个 SVG XML 文件的代码。
清单 23. 使用 iframe 元素包含一个 SVG XML 文件

1	<iframe src="circle1.svg"></iframe>

当使用其中一种方法时，可以将同一个 SVG 图形包含在多个页面中，并编辑 .svg 源文件来进行更新。
结束语本文介绍了使用 SVG 格式创建图形的基础知识。您学习了如何使用内置的集合元素（比如线、矩形、圆等）创建基本形状。您还学习了如何通过发出一系列命令（比如移动到、连线到和使用弧线连接到），使用 path 元素创建复杂的图形。本文还探讨了如何对 SVG 图形应用过滤器和渐变，包括文本图形，以及如何在 HTML 页面中包含 SVG 图形。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)