JavaScript 的新领域 - 动态图片处理（SVG）-3
|
- UID
- 1066743
|
JavaScript 的新领域 - 动态图片处理（SVG）-3
画图比看图容易将这段“文本”粘贴进任何一个文本编辑器，然后将文件保存为一个 SVG 文件，如 sun.svg。你就已经画完了一幅图——一个红红的太阳。但是想要看它却不那么容易。需要用一些专业的绘图软件，比如 Adobe Illustrator，CorelDRAW 和 GIMP 才能显示这个图片。你的电脑上已经有的 Windows 画图、ACDSee 都不支持这种格式。这是可以理解的，因为 SVG 是作为互联网上图片的一种标准。所以接下来看看怎样在浏览器中显示它——不幸的是，这仍然不像打开一幅 JPG 或者 GIF 那么简单。
各种浏览器对 SVG 的支持不一。总的说来，现在仍旧占据最大市场份额的 IE 不支持，其他主流浏览器，包括现在市场份额第二的 Firefox 以及 Chrome、Safari 和 Opera 都对 SVG 标准有不同程度的支持。IE6、7、8 对 SVG 都没有原生的支持，需要专门的插件（如 Adobe SVG Viewer）才能显示。目前还处于技术预览版的 IE9 将会支持。考虑到 IE 曾经占据的垄断性地位和微软有自身的竞争性的 VML 技术，这种“落后”并不奇怪。
不过这种情况，在发展迅速的浏览器市场瞬息万变。所以最好试试看您使用的浏览器支持下列哪种显示方法。
- 使用 <img> 标签。 <img src= 'sun.svg' >
将 SVG 与传统的互联网图片格式同等使用（现在只有 Chrome、Safari 和 Opera 支持）。
- 使用 <embed> 标签。 <embed src="sun.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
pluginspage 属性的值是 Adobe 公司为不原生支持 SVG 的浏览器开发的插件 Adobe SVG Viewer 的安装地址。2009 年 1 月 1 日 Adobe 已经终止对该产品的支持。
- 使用 <object> 标签。
1
2
3
| <object data="sun.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
|
- 使用 <iframe> 标签。
1
2
| <iframe src="sun.svg" width="300" height="100" border="0" style="border-width:0">
</iframe>
|
下面是一个测试浏览器对 html 中各种使用 SVG 的方式是否支持的页面代码。sun.svg 文件与该页面保存于同一目录。
清单 2. 测试浏览器对 SVG 的支持1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> SVG in HTML </TITLE>
</HEAD>
<BODY>
1. 使用 <img> 标签
<br>
<img src="sun.svg" width="300" height="100">
<br>
2. 使用 <embed> 标签
<br>
<embed src="sun.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<br>
3. 使用 <object> 标签
<br>
<object data="sun.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
<br>
4. 使用 <iframe> 标签
<br>
<iframe src="sun.svg" width="300" height="100" border="0" style="border-width:0">
</iframe>
</BODY>
</HTML>
|
动态功能
如果仅仅是将 SVG 作为图片引用，则只发挥了它的静态功能。我们更感兴趣的是应用它的动态功能。SVG 的动态功能包括两个方面。一为动画，二为支持脚本编程。 |
|
|
|
|
|
