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

look_w

动机SVG 利用其支持的复杂动画建立最强烈的即时印象。这些内容在其他地方有解释，您可以在  中找到到这些文章的链接。
本文的思路比较微妙，如果您首先观察一位知识渊博的人用图形表示他在物理空间和时间内移动的轨迹，通常会更容易理解本文内容。它取决于两个 方向流入的信息，既从图表进入您的眼睛，也通过鼠标指针从您的大脑到达实况图。
注意您调整阈值时出现的地理图案。这种业务智能通常只通过可视化而可用。重要的交互式（interactive）概念很强大，就跟第一代计算机电子表格支持的所有 what-if 场景一样：它为理解底层的主题提供一个不可改变的动态 维度，不管是食品券参与率的地图，还是地震中心附近的应力分布图。
但是直到最近，动态图形交互很大程度上只是专有或桌面应用程序的领域。正如本文所展示的，SVG 现在为 Web 应用程序高级的、基于标准的效果打下了良好的基础。SVG 和更通常的简称为 HTML5 的功能集合为 Web 应用程序开发打开了一个崭新的领域。
下一节解释您现在作为用户能看懂的食品券参与率显示图背后的实现。
代码解释现在来看创建 SVG 显示的代码
材料清单本例的基本架构涉及到两个源文件：

• outside_in.html 定义应用程序的绝大部分。
• usa_map.svg 是美国的一个基本地图，编码为 SVG，从 outside_in.html 引用它。

这两个文件都编写为人类可读懂的；您完全可以尝试着在浏览器中打开它们，研究一下源文件。
例子的当前实现实际上将 outside_in.html 各个部分分段为多个 JavaScript .js源文件。就目前了来说，这只是为了方便起见；将它们看作 .html 源文件的一部分，或者更精确地说，看作不受 SVG 影响的源组织的一个方面。根据通常的软件工程原则划分 .html 和 .js 源文件。
但是 usa_map.svg 是独立的：您的浏览器可以单独加载它，就像您会单独查看 GIF、JPEG、PNG、TIFF 或其他图像格式一样。浏览器首次加载 foodstamps.html 时，只是将 usa_map.svg 当作一个图像，并构造一个可显示的页面，地图作为嵌入式图形对象。这是 <object> 元素的效果：
清单 1. HTML 中对 SVG 的引用

1 2 3 4

<div style = "position:absolute;left:0px; top:60px"> <object id = "map" type = "image/svg+xml" data = "usa_map.svg"         width = "1050" height = "600"></object> </div>

结果是让浏览器显示内容类似于 ，其中所有 50 个州和美国属国都以单一颜色显示。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）显示为纯白色。
图 5. 任何动态布色之前的地图