在浏览器中显示矢量图形

时间:2008-08-13 09:43:54

标签: cross-browser svg vector-graphics vml

我需要在我正在处理的网站上显示一些交互式(附带DOM侦听器等和事件处理)矢量图形。有一个针对SVG的W3C建议,虽然这种格式仍然无法被Internet Explorer支持认可(对于公共网站而言)。 IE处理VML,甚至有javascript库可以做一些类似画布的绘图,具体取决于浏览器(SVG与VML) - excanvasGFX of Dojo Toolkit等等。虽然它们都不能显示给定标记的SVG图像,但这样会很好并且可以接受。

所以这个问题实际上包含几个部分:

  1. 是否有任何跨浏览器的Javascript库显示来自给定标记的矢量图形(非强制性SVG)并提供附加到DOM事件的可用性?
  2. 如果没有,哪种最狡猾的浏览器嵌入式技术最适合做这样的任务?我可以选择Flex / Flash,Java applet。由于Windows锁定,Silverlight不是一个选项。
  3. [编辑]感谢大家的意见/建议。以下是关于此事的随机笔记/结论:

    • 我需要的交互水平是能够检测正在显示的矢量图像上的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错误。

9 个答案:

答案 0 :(得分:9)

Safari,Opera和Firefox都支持SVG本身(例如没有插件)不同程度的完整性和正确性,包括从javascript编写svg脚本的能力。

还有一个canvas元素现在正在html5中标准化,并且在上述浏览器中也已经支持(由于html5草案中相对较新的更改,在某些边缘情况下存在各种怪癖)。

不幸的是,任何基于标准的方法都被IE故意无视其自身生态系统之外发生的事情所破坏,但是有很多库试图将canvas / svg转换为VML(IE的专有矢量语言),例如{ {3}}

[编辑:哎呀,我忘了我最喜欢的js图书馆 - iecanvas!它可以在画布中解析和显示svg,并且相信也支持IE]

[又一个编辑:Cake实际上有一个Cake在做我认为你想做的事情]

答案 1 :(得分:6)

看看Raphael Javascript library。这是早期的事情,但看起来很有希望。

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

取决于您想要的互动方式?

答案 2 :(得分:2)

你能用Silverlight澄清“Windows锁定”的含义吗?它运行在Windows和MacIntel上,并且矢量部分在Linux上使用Moonlight插件运行得很好。

你是因为缺乏Amiga支持而被抛弃了吗?

答案 3 :(得分:1)

Walter Zorn对任意矢量图形有JavaScript library。它看起来不错。

答案 4 :(得分:1)

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

更新:等等,你已经说过了。我下次应该读完整个问题! :)

答案 5 :(得分:0)

转到SVG - 然后告诉用户为IE获取ADOBE SVG插件。

查看这个优秀的网站 - 这是一个英国政府网站(公共服务)

ELGIN

答案 6 :(得分:0)

IE支持VML,但没有别的,而且很难看。微软声称他们放弃了它(使用新的XAML和所有)但它仍然是他们的Office XML格式的一部分(这就是Excel .xlsx支持评论的方式,非常奇怪)。

FX并加载更多支持新的Canvas元素。许多人支持SVG,但考虑到MS在Silverlight上所做的工作,我很快就看不到IE支持SVG了。

微软应该为没有MS操作系统提供Silverlight插件。

我一直在使用Flex - 尽管使用了Eclipse,它还是相当不错的。您不需要购买昂贵的Adobe服务器组件来使用Flex - 它可以使用SOAP服务。

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

答案 7 :(得分:0)

我认为SVG不是未来的好选择。来自Wikipedia

  • “最常见的IE插件是由Adobe制作的。然而,Adobe计划在2009年初撤销该产品”
  • “......即将推出的IE8版本中也不支持SVG的Internet Explorer”
  • “...所有人都不完全支持SVG 1.1 ......”
  • “Corel SVG Viewer插件曾经是从Corel提供的。它的开发已停止。”

答案 8 :(得分:0)

在你列出的所有可能性中,唯一一个不是滥用现有技术(Javascript),几乎不支持(SVG,Canvas元素)或大量工作(Java)的可能性就是Flash。它被设计为矢量图形包,并且与SVG和canvas标签之类的浏览器兼容。

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