JavaScript 的新领域 - 动态图片处理（SVG）-5
|
- UID
- 1066743
|
JavaScript 的新领域 - 动态图片处理（SVG）-5
脚本可编程性SVG 是一个 XML 文件，用于 XML 编程的两种模型 DOM 和 SAX 也适用于它。因为 SVG 是被设计用于互联网，所以通过 JavaScript 和 DOM 访问它就是最重要的应用模式。我们已经熟悉通过 JavaScript 和 DOM 动态地修改 HTML，同样我们也可以在浏览器中动态地创建、修改和删除图片，这也将是本文之后在 SVG 方面的重点。
为了演示这些动态功能，我们采取和上面不同的在页面中使用 SVG 的方式——在 XHTML（XML 的 XML 版本）直接写入 SVG 的源文本，而上面的四种方式 SVG 的定义都保存在和页面不同的另一个文件中。这样做有两个原因。一是在支持 XHTML 和 SVG 在浏览器中，可以通过 JavaScript 直接访问和修改 SVG。二是在互联网的未来标准 HTML 5 中，SVG 就可以这样直接在 HTML 中定义，就像其他 HTML 元素一样。
之后的几个例子都可以在 Firefox 中运行，但无法使用 IE。因为要到版本 9，IE 才会加入对 XHTML 的支持（目前的 IE 只支持将 XHTML 作为 HTML 解释），再次显示了拥抱公开标准的迟缓。
我们的第一个例子是一个进度条。在 Firefox 中载入下面的 XHTML 页面，会显示一个绿色的运动的进度条。
图 1. 进度条示例 清单 4. 进度条代码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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 进度条 </title>
<script language='JavaScript'>
/* <![CDATA[ */
function ProgressBar(info){
var stem = {};// 此函数最后返回的代表进度条的对象。
var done = 0, length, outline, bar;// 声明内部变量。
bar = document.getElementById('done');// 进度条中绿色的变化部分。
length = 80;
// 重置进度到零。
function reset(){
return to(0);
}
// 设置进度到某个值。
function to(value){
if (value >= 100) {
done = 100;
bar.setAttribute('width', length);
}
else {
done = value;
bar.setAttribute('width', Math.round(done * length / 100));
}
return stem;
}
// 进度变化某个值。
function advance(step){
return to(done + step);
}
// 以下给进度条对象添加方法。
// 获得当前进度值。
stem.getDone = function(){
return done
};
stem.reset = reset;
stem.to = to;
stem.advance = advance;
return stem;// 返回可供脚本使用的进度条对象。
}
// 测试进度条对象。
function testBar(){
var bar = ProgressBar();
// 此内部函数每运行一次，增加进度值 1，直到进度值为 100。
function test(){
if (bar.getDone() === 100) {
clearInterval(id);
}
else {
bar.advance(1);
}
}
// 每十分之一秒改变一次进度。
var id = setInterval(test, 100);
}
// 页面载入后开始测试。
window.addEventListener('load', testBar, true);
/* ]]> */
</script>
</head>
<body>
<div id='svgDiv'>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" style="border:1px solid; width:100px; height:100px; ">
<g id='progBar'>
<rect x='10' y='45' width='80' height='10' stroke='grey' fill='white'/>
<rect id='done' x='10' y='45' width='0' height='10' fill='green'/>
</g>
</svg>
</div>
</body>
</html>
|
对这个 XHTML 需要做一些说明。
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 的根元素为 html 元素，xmlns 属性指定 XHTML 的命名空间。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"style="border:1px solid; width:100px; height:100px; ">
在 XHTML 中直接插入 svg 元素，并指定命名空间等其他属性。
viewBox 定义矢量图可见的坐标空间，四个数字依次是原点的 x 坐标、y 坐标、平面的宽度、高度。SVG 的坐标空间符合计算机中指定屏幕空间的惯例，x 坐标轴的正方向向右，y 坐标轴的正方向向下。
style 属性指定 svg 元素的各种外观特性。SVG 与 HTML 一样，可以应用 CSS 定义外观，并且有一些专门的特性：
- XHTML 中的 JavaScript 代码被包含在 /* <![CDATA[ */ 和 /* ]]> */ 之间。 在 HTML 文件中不需要这样做。因为在 HTML 中 <script> 标签内的 JavaScript 代码被解释为 CDATA（Character Data，XML 中的一种类型，用于包含任意的字符数据）；而在 XHTML 中 <script> 标签内的部分被解释为 PCDATA（Parsed Character Data，也是 XML 中的一种类型，为字符数据和元素的混合内容），所以也要通过 XML 的语法检查，而 JavaScript 代码显然不符合 XML 的标签的定义语法。解决方法就是在代码外人工加上 ![CDATA[ 和 ]]> 标注，使得 XML 的语法校验器忽略这段内容。但是这样会带来第二个问题，有些浏览器不认识 CDATA 标注，因而这些代码又无法通过 JavaScript 的语法检查。所以我们在 CDATA 标注两侧再加上 JavaScript 的注释标记。这样 <script> 标签内的代码既能通过 XML 的语法检查，又能被 JavaScript 引擎认识。
- <svg> 标签内有一个 <g> 标签和两个 <rect> 标签。 g 元素用于分组。分组不仅可以使 SVG 的内容结构清晰，同一组内的对象还可以被集体操作。rect 元素代表一个矩形；x、y、width 和 height 属性分别指定矩形左上顶点的横坐标、纵坐标和矩形的宽度、长度；stroke 属性指定图形外框的线条颜色。我们用第一个空心的矩形显示进度条的外框，第二个实心的绿色矩形显示变化的进度。为了在脚本中方便地访问，我们设置了绿色矩形的 id 属性。
- 代码说明 在 JavaScript 脚本中我们用 DOM 先后获得绿色矩形对象并修改它的宽度属性。getElementById 和 setAttribute 的用法和在 HTML 中没有两样。值得注意的是，有些我们在操作 HTML 时使用的方法，在 XML 中是不存在的，如根据名称获取元素的 getElementsByName。
这个例子中前三点特别的设定有些麻烦，不过这些在正在获得越来越多支持并且很快将成为互联网的现实标准的 HTML 5 中都是不必要的。在 HTML 5 中不需要在 html 和 svg 元素中指定命名空间，svg 和其中的各种标签会被自动识别。JavaScript 代码也会和在现在的 HTML 页面中一样，不需要在两侧加上 CDATA 标注。
|
|
|
|
|
|
