Board logo

标题: JavaScript 的新领域 - 动态图片处理（SVG）-5 [打印本页]
作者: look_w    时间: 2018-9-23 12:36     标题: 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 定义外观，并且有一些专门的特性：




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