问题标签 [vector-graphics]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

1095 问题

0 投票

9 回答

11328 浏览

cross-browser - 在浏览器中显示矢量图形

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

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

是否有任何跨浏览器 Javascript 库可以显示来自给定标记（不是强制性 SVG）的矢量图形并提供附加到 DOM 事件的可用性？
如果没有，哪种最流行的嵌入式浏览器技术最适合做这样的任务？我可以从 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 错误。