在浏览器中显示矢量图形 [英] Displaying vector graphics in a browser

问题描述

我需要在我正在开发的网站上显示一些交互式（附加DOM侦听器等和事件处理）矢量图形。有一个W3C的SVG建议，虽然这种格式仍然无法识别的Internet Explorer支持是必须的（对于公共网站）。 IE处理VML，甚至有JavaScript库，做一些画布样绘图取决于浏览器（SVG VS VML） - excanvas ， Dojo Toolkit的GFX 等。

I need to display some interactive (attaching with DOM listeners etc. and event handling) vector graphics in web site I am working on. There is a W3C recommendation for SVG though this format is still not recognized by Internet Explorer support of which is a must (for a public website). IE handles VML though and there are even javascript libraries that do some canvas-like drawing depending on a browser (SVG vs. VML) - excanvas, GFX of Dojo Toolkit and more. That would be nice and acceptable though none of them can display an SVG image from the given markup.

因此，问题实际上由几个部分组成：

So the question actually consists of several parts:

1. 是否有任何跨浏览器Javascript库显示来自给定标记（不是强制性SVG）的矢量图形，并提供附加到DOM事件的可用性？


2. 如果没有，最方便的浏览器嵌入式技术最适合做这样的任务？我可以选择从Flex / Flash，Java小程序。

[编辑]谢谢大家的支持评论/建议。下面是一些我对这件事的随机注释/结论：

[EDIT] Thank you all for your comments/suggestions. Below are just some my random notes/conclusions on this matter:

• 我需要的交互性水平是检测向量上的DOM事件的能力正在显示的图像 - 鼠标悬停，鼠标悬停，点击等 - 以及对背景颜色，显示对话框等反应的能力。


• 使用SVG格式的想法非常好是许多浏览器的本机，除了最流行的IE之一。在显示动态SVG的一些实验后，我意识到IE版本7最有问题。


• 蛋糕似乎是​​一个伟大的Javascript框架，虽然我无法得到在IE7上工作的例子。


• Java Applets - 我喜欢这个想法，因为我虽然可以使用Apache Batik库，一个优质的SVG渲染器。然而，Batik是非常大的图书馆，我负担不起部署一个重量几兆字节的applet。


• 我决定坚持使用Flex选项。我找到了一个漂亮的矢量图形库 Degrafa 。它使用自己的标记格式，但它识别SVG路径符号，所以在我的情况下，它将是很容易转换我的SVGs使用XSLT或只是解析他们。

• The level of interactivity I need is ability to detect DOM events on the vector image being displayed - mouseover, mouseout, click etc. - and ability to react on them like changing background color, displaying dialog etc.
• The idea of sticking with SVG format is quite well as it is native on many browsers except the most popular one - IE. After some experimenting with displaying dynamic SVG I realized that IE version 7 the most problematic. There's too much hassle because of browser incompatibilities.
• Cake seems a great Javascript framework, though I could not get the examples working on IE7.
• Java Applets - I liked that idea the most as I though I could use the Apache Batik library, a quality SVG renderer. However, Batik is very big library and I cannot afford deploying an applet that weights few megabytes.
• I decided to stick with the Flex option. I found a nice vector graphics library Degrafa. It uses its own markup format however it recognizes SVG path notation, so in my case it is going to be quite easy to transform my SVGs using XSLT or just parsing them.

[ EDIT 2 ]还有一些评论出现。我想澄清一下，Windows锁定我的意思是Silverlight通常会在Windows上运行的情况，更具体地说，IE。我怀疑它是一个被接受的解决方案（例如Flash或Java Applet）在其他系统上。是的，我毫不怀疑，一个能够在任何系统上启动Silverlight应用程序，但我担心这对一般用户来说太费力。

[EDIT 2] Some more comments appeared. I'd like to clarify that by "Windows lock-in" I mean the situation that Silverlight would normally run on Windows, more specifically, IE. I doubt it is an accepted solution (like Flash or Java Applet, for instance) on other systems. Yes, I have no doubt that one is able to launch Silverlight app on any system though I fear it would be too much effort for an average user.

@Akira：你在IE7上的那些SVG渲染器有什么问题吗？

@Akira: Have you had any problems with those "SVG renderers" on IE7? I get thrown Javascript errors all the time.

推荐答案

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

Safari, Opera and Firefox all support SVG natively (eg. without plugins) to varying degrees of completeness and correctness, including the ability to script the svg from javascript.

还有canvas元素现在正在html5标准化，并已经支持（由于html5草案中的相对最近的变化，在某些边缘情况下具有各种怪癖）。

There's also the canvas element which is now being standardised in html5, and is already supported in the above browsers as well (with various quirks in certain edge cases due to relatively recent changes in the html5 draft).

不幸的是，任何基于标准的方法都被IE的故意忽视其自身生态系统之外发生的事情，但是有一些库尝试将canvas / svg转换为VML（IE的专有矢量语言），例如

Unfortunately any standards based approach is kind of destroyed by IE's willful disregard of what is happening outside its own ecosystem, however there are a number of libraries that try to convert canvas/svg into VML (IE's proprietary vector language) such as iecanvas.

[另一个编辑：Cake实际上有一个 demo 做我想你想做的事情]

[Yet another edit: Cake actually has a demo doing what i think you want to do]

这篇关于在浏览器中显示矢量图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！