使用SVG文件的跨浏览器解决方案

Cross-browser solution to work with SVG files?

本文关键字：浏览器 解决方案 SVG 文件 使用      更新时间：2023-09-26

什么跨浏览器JavaScript SVG库将允许我显示和交互预先制作的 SVG图像

我知道这些库:

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

我基本上是在尝试使任意图像块"可选择"。

Raphaël 是否支持导入Illustrator svg，通过使用这个伟大的插件。你所要做的就是将ai文件保存为SVG，使用文本编辑器打开它，复制代码并使用插件导入。工作很好，除了:只支持"路径"对象，没有文本，没有渐变，没有阴影…

我在IE中使用http://excanvas.sourceforge.net/支持Canvas，在Canvas中使用ang支持SVG。

你能做的是使用一个组合的变化和svgweb，你可以检查看看浏览器是否允许画布，如果是，加载变化和使用它。否则检查它们是否有flash，如果有，使用svgweb。如果两者都没有，那么告诉他们升级浏览器。

如果你不确定javascript的特性检测，你可以阅读http://ejohn.org/blog/future-proofing-javascript-libraries/

我很想使用Google Chrome Frame(一个IE插件)。这将节省您维护两组代码(一组用于IE用户，另一组用于普通浏览器用户)。在页面中添加以下元标签将使SVG能够在IE中呈现(通过GCF):

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

查看这里的说明如何检测，并可能提示用户安装GCF。

我发现的最佳解决方案是将Raphael与此工具一起使用，它允许您将SVG文件(在我的情况下由Illustrator生成)几乎原样转换为Raphael代码。因为拉斐尔是IE6+ -你可以很容易地交叉浏览你的一部分的一些努力。

下面是我的例子，说明两者结合可以达到什么效果。

相关文章：