2011-12-09 67 views
1

什么跨浏览器的JavaScript SVG库将允许我显示和交互预制 SVG图像。使用SVG文件的跨浏览器解决方案?

我知道这些库:

  • Raphaël:我目前使用这种带有SVG插件加载一起。但该插件不支持Inkscape或Adobe Illustrator SVG(即大多数SVG)。
  • cang:这个库看起来很有希望,但它需要<canvas>支持,IE本身没有。
  • svgweb:另一个更有前途的图书馆。它需要Flash,但大多数IE用户都有Flash。
  • jQuery SVG:它似乎能够加载SVG图像,但开发似乎已经死亡。它需要我使用jQuery 1.3的修改版本。

我基本上试图让大块任意图像“可选择”。

任何帮助将不胜感激。

回答

3

Raphaël确实支持导入Illustrator SVG,通过使用this great plugin。您只需将您的ai文件保存为SVG,使用文本编辑器打开它,复制代码并将其与插件一起导入。作品很好,除了:只支持“路径”对象,没有文字,没有渐变,没有阴影...

+0

我现在正在使用它。不幸的是,它不能很好地工作,并且导出的Illustrator图像相当糟糕(我得到一个黑色的矩形而不是实际的形状)。 – Blender

+0

它对复杂的SVG文件有限制。你能发布你正在使用的SVG文件吗? – Choy

+0

问题在于SVG文件的两个第一个元素:它们是rect项目。该插件仅支持路径。如果你将它们删除,它就会起作用。 – Choy

0

你可以做的是使用cang和svgweb的组合,你可以检查浏览器是否允许画布,如果是,加载cang并使用它。否则检查他们是否有闪光灯,如果是的话,请使用svgweb。如果他们没有,则告诉他们升级浏览器。

如果您不确定javascript功能检测的问题,您可以阅读。

+0

不幸的是,我可能不得不这样做。但我并不是很激动地重新编写大量的代码来与两个库一起工作,但是如果这是需要的,那么我将不得不这样做。 – Blender

0

我会试图利用Google Chrome Frame(一个IE插件)。这将节省您维护两套代码(一个用于IE用户,另一个用于常规浏览器用户)。添加下面的元标记到您的网页将使SVG渲染在IE(通过GCF):

<meta http-equiv="X-UA-Compatible" content="chrome=1"> 

See here的说明如何检测,并有可能提示用户安装GCF。

+0

我想过GCF,但很难让任何IE用户安装它。我更喜欢可以直接使用的东西。 – Blender

0

我发现的最好的解决方案是使用Raphael和this tool,它允许您将SVG文件(在我的情况下由Illustrator生成)转换为Raphael代码。而且因为拉斐尔是IE6 + - 你可以很容易地在你身上做一些努力。

Here是我可以用这两个东西的组合来实现的例子。

相关问题