26 May 2009

在HTML中使用 SVG

如何在HTML中使用SVG文档？有多种方法可以完成：可以使用HTML iframe；可以在XHTML中直接使用 SVG 代码 (前提要正确设置命名空间)；但最常用的方法是通过HTML object 元素。 HTML object 的一个很大的优点是作者可以设置备用HTML内容，若浏览器不支持SVG，则将显示备用内容。下面是一个例子：

如果你能关闭浏览器的 SVG-渲染功能 (在 Firefox中，在 about:config中双击 svg.enabled) ，然后刷新上面代码可以查看其效果。

可以在 object 中添加任意 HTML 内容作为备用内容。例如，指向SVG插件或支持SVG的浏览器的链接。我们的 SVG 相片簿将显示 HTML 版本作为后备内容。也就是说我们的备用内容是 HTML img 元素。

Break On Through To The Other Side

在HTML中嵌入SVG很有用，但是更有趣的是能通过脚本连接两个文档。记住 SVG 支持脚本而且也拥有 DOM。这意味着可以通过脚本在SVG中改变HTML，反之亦然：

在 HTML 中控制 SVG：HTMLObjectElement 的 contentDocument 属性就是 SVG 文档 (例如，SVGDocument 接口)。

在 SVG 中控制 HTML：SVG DOM中的Window 接口的frameElement 属性即是 HTML object 元素。注意只有使用内嵌SVG时此属性才有值。如果单独浏览 SVG 文件 (非内嵌)，则frameElement 属性为空。

HTML-至-SVG 接口

该图显示了如何在DOM中控制所有元素 (window, document, object等)。HTML 文档 (左上角) 通过HTML object 元素包含一个内嵌 SVG 文档 (右下角) 。HTML object的contentDocument 属性指向 SVG DOM的document。类似的，也可以在上图中查找如何通过DOM控制其他属性和对象。

Til next time,
Jason at 00:00