在浏览器中显示矢量图形

时间:2020-03-05 18:39:21  来源:igfitidea点击:

我需要在我正在工作的网站上显示一些交互式(添加DOM侦听器等和事件处理)矢量图形。尽管IE浏览器仍然无法识别此格式,但仍推荐使用SVG的W3C建议(对于公共网站)。 IE可以处理VML,甚至有JavaScript库可以根据浏览器(SVG与VML)的附件,Dojo Toolkit的GFX以及类似画布的功能进行绘制。尽管它们都不能显示来自给定标记的SVG图像,但这将是很好并且可以接受的。

因此,问题实际上由以下几部分组成:

  • 是否有跨浏览器Javascript库显示给定标记(不是必需的SVG)中的矢量图形,并提供添加到DOM事件的可用性?
  • 如果没有,哪种最流行的浏览器嵌入式技术最适合执行此任务?我可以从Flex / Flash,Java applet中进行选择。由于Windows锁定,因此无法选择Silverlight。

[EDIT]谢谢大家的评论/建议。以下是我对此事的一些随机注释/结论:

  • 我需要的交互级别是能够检测正在显示的矢量图像上的DOM事件-鼠标悬停,鼠标移出,单击等-并对它们做出反应,例如更改背景颜色,显示对话框等。
  • 坚持使用SVG格式的想法非常好,除了最流行的IE浏览器之外,它在许多浏览器中都是本机的。经过一些显示动态SVG的实验后,我意识到IE版本7是最有问题的。由于浏览器不兼容,所以麻烦太多了。
  • 尽管我无法在IE7上使用示例,但Cake似乎是一个很棒的Javascript框架。
  • Java Applets-我最喜欢这个主意,尽管我可以使用Apache Batik库(一种优质的SVG渲染器)。但是,蜡染是一个很大的图书馆,我负担不起部署一个重达几兆字节的applet。
  • 我决定坚持使用Flex选项。我找到了一个不错的矢量图形库Degrafa。它使用自己的标记格式,但是可以识别SVG路径符号,因此,在我的情况下,使用XSLT或者仅解析它们来转换SVG将非常容易。

[编辑2]出现了更多评论。我想澄清的是," Windows锁定"是指Silverlight通常可以在Windows(尤其是IE)上运行的情况。我怀疑它是否在其他系统上是可接受的解决方案(例如Flash或者Java Applet)。是的,毫无疑问,我可以在任何系统上启动Silverlight应用程序,尽管我担心这对于普通用户来说会花费很多精力。

@Akira:我们对IE7上的" SVG渲染器"有任何疑问吗?我一直都在抛出Javascript错误。

解决方案

回答

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

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

回答

选择SVG,并告诉用户获得IE的ADOBE SVG插件。

看到这个出色的网站,它是英国政府网站(公共服务)

埃尔金

回答

IE支持VML,但没有其他功能,而且很难看。微软声称已经删除了它(包括新的XAML及其它),但它仍然是其Office XML格式的一部分(奇怪的是Excel .xlsx如何支持注释)。

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

Microsoft应该为没有MS操作系统的用户提供Silverlight插件。

我一直在使用Flex,尽管使用Eclipse还是不错的。我们无需购买昂贵的Adobe服务器组件即可使用Flex,因为Flex可以消耗SOAP服务。

Flex的开发工具价格合理,几乎每个人都有Flash。

回答

我认为SVG并不是未来的好选择。从维基百科:

  • "最常见的IE插件是由Adobe生产的。但是,Adobe计划在2009年初撤回该产品。"
  • " ... Internet Explorer在即将发布的IE8版本中也将不支持SVG"
  • " ...所有人都不完全支持SVG 1.1 ..."
  • " Corel SVG Viewer插件曾经由Corel提供。其开发已停止。"

回答

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

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

不幸的是,任何基于标准的方法都会因IE故意忽略其自身生态系统之外发生的事情而被破坏,但是有许多库试图将canvas / svg转换为iecanvas等VML(IE专有的矢量语言)。

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

[还有另一个编辑:Cake实际上有一个演示程序,我想做你想做的事]

回答

看看Raphael Javascript库。现在还很早,但是看起来非常有前途。

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

取决于我们要如何互动?

回答

在列出的所有可能性中,Flash并不是对现有技术(Javascript),几乎不受支持(SVG,Canvas元素)或者大量工作(Java)的可怕滥用。它被设计为矢量图形包,并且与SVG和canvas标签相比,与更多的浏览器兼容。

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

回答

我们能否阐明Silverlight中" Windows锁定"的含义?它可以在Windows和MacIntel上运行,矢量部分可以在带有Moonlight插件的Linux上很好地运行。

我们是因为缺少Amiga支持而被淘汰吗?

回答

沃尔特·佐恩(Walter Zorn)具有用于任意矢量图形的JavaScript库。看起来不错。