利用 SVG 在 Web 应用程序中创建客户端图表交互（3）

look_w

开始解释脚本编写但是您的浏览器若支持 JavaScript 脚本，那么它的工作就还没完。onload 浏览器事件触发 JavaScript 初始化，从而：

• 将食品券数据存储在一个方便的表单中；
• 激活显示器顶部的滑块小部件；

最重要的是，还获得一个到 SVG 实例的 DOM 的句柄。           
通过该句柄，JavaScript 然后可以访问 SVG 的单个元素以及这些元素的特定属性，直到为单个州的背景布色的层次：
清单 2. 从外围 HTML 访问 SVG 属性

1 2 3 4 5 6 7 8 9 10 11

function color_map(lower_level) {     var map = document.getElementById('map');     var svg_document = map.contentDocument;     // Typical values for abbreviation:  'AK', 'AL', ...     for (var abbreviation in big_table) {         this_state = svg_document.getElementById(abbreviation);         //  ...         //  this_color has a value such as "red", "white", or "yellow".         this_state.setAttribute("style", "fill:" + this_color);     } }

这里传递给 getElementById() 的 ID map 就是  中 object 的 ID。SVG 实例在 HTML DOM 中具有该 ID。但是要到达单个州并为其布色，您是在 SVG 的 DOM 中导航，该 DOM 在  中作为 svg_document 出现。svg_document 一旦分配，就可用于编写脚本，方式完全跟利用 document 为单独的 SVG 编写脚本相同。但是要注意，可以说 document 是一个关键词，因为每种浏览器都保证它的值，而 svg_document 只是稍微与之类似，它的值是在这个特定的程序中由 color_map 函数定义中的局部赋值分配的。
SVG 的作用SVG 如何与编程协作呢？很少需要它；地图中单个州的区域被分配熟悉的 ID（'AK'、'AL'、……'WY'），以便容易引用：
清单 3. SVG 中一个元素的源代码

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg    version="1.0"    width="958.69"    height="592.78998"    id="svg8834"       ...     <path        d="M 486.79838,390.07686 L 488.12421,392.50754 ..."        id="NE"        style="fill:#FFFFFF " />        ... </svg>

注意，该 SVG 实例没有 嵌入脚本编程。再次强调：尽管此食品券例子本质上是关于 SVG 脚本编程，但是根本没有 脚本代码出现在 SVG 源代码本身中。据我所知，这种由外而内（outside-in）的 SVG 脚本编程技术以前还没有清楚地文档化过，即使不同的浏览器已经支持它多年了。
SVG、HTML 和 XML要清楚地理解 SVG 在 Web 应用程序中具有的潜能，您一定得明白 XML 在 SVG 和 Web 专家之间扮演的稍微不同的角色。
就这点来说，工作在 SVG 和 Web 中的相同之处相当少。尽管 Web 浏览器是分布最广的 SVG 呈现器，但是 SVG 专家通常不把关注点放在传统的 Web 应用程序上。其中一个后果就是，缺少对 “由外而内” 脚本编程的文档化。
另一个后果是，Web 和 SVG专家谈论 XML 知识时偶尔会出现混淆。对于 Web 工作人员来说，XML 是一种选择：他们可以选择以比如说 XHTML 方式思考，但是也存在备选方式。无论哪种情况，浏览器在 HTML 解析上多少有点宽容。
对于 SVG 来说不是这样的。SVG 是一个 XML 应用程序。如果一个 .svg 源文件不是格式良好的 XML，不可解析为有效的 SVG，那么它就是没有用的。尽管大家可能会推测潜在的 SVG 解析器，但是这里不进行这方面的讨论。
这个充斥市场的 Web 浏览器接受广泛的类似于 HTML 的输入，在呈现 SVG 时通常相当严格。SVG 实例和 Web 文档都是以 DOM 的形式编写脚本的，并且两种 DOM 都可序列化为 XML。尽管有这些类似之处，但是单个浏览器中的解析器一般是各不相同的，某种程度上讲，从业者都必须单独学习。