HTML5 中的可缩放矢量图形（SVG）- 向网页添加 SVG XML
|
- UID
- 1066743
|
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 图形。 |
|
|
|
|
|
