28

我需要在我正在处理的网站中显示一些交互式（附加 DOM 侦听器等和事件处理）矢量图形。W3C 推荐了 SVG，尽管 Internet Explorer 支持仍然无法识别这种格式，这是必须的（对于公共网站）。IE 处理 VML，甚至还有一些 JavaScript 库可以根据浏览器（SVG 与 VML）进行一些类似画布的绘图 - excanvas、Dojo Toolkit 的 GFX等等。尽管它们都不能从给定的标记中显示 SVG 图像，但这会很好并且可以接受。

所以这个问题实际上由几个部分组成：

  1. 是否有任何跨浏览器 Javascript 库可以显示来自给定标记（不是强制性 SVG）的矢量图形并提供附加到 DOM 事件的可用性？
  2. 如果没有，哪种最流行的嵌入式浏览器技术最适合做这样的任务？我可以从 Flex/Flash、Java 小程序中进行选择。由于 Windows 锁定，Silverlight 不是一个选项。

[编辑]谢谢大家的意见/建议。以下只是我对此事的一些随机笔记/结论：

  • 我需要的交互性级别是能够检测正在显示的矢量图像上的 DOM 事件——鼠标悬停、鼠标悬停、单击等——以及对它们做出反应的能力，比如改变背景颜色、显示对话框等。
  • 坚持使用 SVG 格式的想法非常好，因为它在许多浏览器上都是原生的，除了最流行的浏览器 - IE。在尝试显示动态 SVG 之后，我意识到 IE 版本 7 是最有问题的。由于浏览器不兼容，有太多麻烦。
  • Cake 似乎是一个很棒的 Javascript 框架，尽管我无法获得在 IE7 上运行的示例。
  • Java Applets - 我最喜欢这个想法，因为我可以使用 Apache Batik 库，一个高质量的 SVG 渲染器。但是，Batik 是一个非常大的库，我负担不起部署一个只有几兆字节的小程序。
  • 我决定坚持使用 Flex 选项。我找到了一个不错的矢量图形库Degrafa。它使用自己的标记格式，但是它识别 SVG 路径表示法，因此在我的情况下，使用 XSLT 转换我的 SVG 或仅解析它们将非常容易。

[编辑 2 ] 出现了更多评论。我想澄清一下，“Windows 锁定”是指 Silverlight 通常在 Windows 上运行的情况，更具体地说，是 IE。我怀疑它是否是其他系统上可接受的解决方案（例如 Flash 或 Java Applet）。是的，我毫不怀疑可以在任何系统上启动 Silverlight 应用程序，尽管我担心这对普通用户来说会花费太多精力。

@Akira：您对 IE7 上的那些“SVG 渲染器”有什么问题吗？我总是抛出 Javascript 错误。

4

9 回答 9

9

Safari、Opera 和 Firefox 都以不同程度的完整性和正确性原生支持 SVG（例如，没有插件），包括从 javascript 编写 svg 脚本的能力。

还有一个 canvas 元素，它现在在 html5 中被标准化，并且已经在上述浏览器中得到支持（由于 html5 草案中相对较新的变化，在某些边缘情况下存在各种怪癖）。

不幸的是，任何基于标准的方法都会因 IE 故意无视其自身生态系统之外发生的事情而遭到破坏，但是有许多库试图将 canvas/svg 转换为 VML（IE 的专有矢量语言），例如iecanvas。

[编辑：哎呀，我忘记了我最喜欢的 js 库——Cake！它可以在画布中解析和显示svg，并且相信也支持IE]

[另一个编辑：Cake 实际上有一个演示，做我认为你想做的事情]

于 2008-08-13T11:13:39.987 回答
6

看看Raphael Javascript 库。现在还为时过早，但看起来很有希望。

我记得在 IE7.2 中列出了支持 SVG 的 IE 路线图。

要看你想要怎样的交互性了？

于 2008-08-13T11:42:58.460 回答
2

Can you clarify what you mean by the "Windows lock-in" thing with Silverlight? It runs on Windows and MacIntel, and the vector portions run just fine on Linux with the Moonlight plugin.

Were you thrown off by the lack of Amiga support?

于 2008-08-16T07:06:17.100 回答
1

查看已在许多浏览器中实现的新Canvas元素。我还听说有一个用于 IE 的 ActiveX 控件也实现了 Canvas 元素。

更新：等等，你已经说过了。下次我应该阅读整个问题！:)

于 2008-08-13T09:55:05.933 回答
1

Walter Zorn 有一个用于任意矢量图形的JavaScript 库。它看起来不错。

于 2008-09-17T01:11:24.100 回答
0

选择 SVG - 告诉用户为 IE 获取 ADOBE SVG 插件。

看到这个优秀的网站 - 这是一个英国政府网站（公共服务）

埃尔金

于 2008-08-13T09:59:13.973 回答
0

IE 支持 VML，但没有其他支持，而且很丑。微软声称他们已经放弃了它（使用新的 XAML 和所有），但它仍然是 Office XML 格式的一部分（这就是 Excel .xlsx 支持评论的方式，很奇怪）。

FX 和负载更多支持新的 Canvas 元素。许多支持 SVG，但考虑到 MS 在 Silverlight 上所做的工作，我短期内看不到 IE 支持 SVG。

Microsoft 应该为非 MS 操作系统提供 Silverlight 插件。

我一直在使用 Flex——尽管使用了 Eclipse，它还是很不错的。您无需购买极其昂贵的 Adob​​e 服务器组件即可使用 Flex——它可以使用 SOAP 服务。

Flex 的开发工具非常实惠，几乎每个人都有 Flash。

于 2008-08-13T10:12:54.227 回答
0

我不认为 SVG 是未来的好选择。来自维基百科：

  • “最常见的 IE 插件是由 Adob​​e 生产的。然而，Adobe 计划在 2009 年初退出该产品”
  • “... Internet Explorer 在即将推出的 IE8 版本中也将不支持 SVG”
  • “...对 SVG 1.1 的支持不完整...”
  • “Corel SVG Viewer 插件曾经由 Corel 提供。它的开发已经停止。”
于 2008-08-13T10:18:18.007 回答
0

在您列出的所有可能性中，唯一不严重滥用现有技术（Javascript）、几乎不支持（SVG、Canvas 元素）或大量工作（Java）的是 Flash。它被设计为矢量图形包，与 SVG 和 canvas 标签相比，兼容更多的浏览器。

我不会选择 Flash 而不是所有其他选项的唯一原因是，如果您的目标是移动浏览器或者没有 Flash 软件包的预算。

于 2008-08-13T12:43:36.933 回答