使用 RaphaelJS 嵌入 SVG答案

【问题标题】：Embed SVG with RaphaelJS使用 RaphaelJS 嵌入 SVG
【发布时间】：2013-01-05 17:29:41
【问题描述】：

我正在为 Web 应用程序开发 SVG 查看器。我必须处理现有的 SVG 文件并处理它们以显示工具提示、使用鼠标事件进行效果...

我一直在寻找一个很好的库来做到这一点，RaphaelJS 似乎很有用，它具有 IE 兼容性（甚至是 IE8）。

但是，经过几次尝试，我无法通过 Raphael 使用 SVG 获取嵌入元素。

这不可能吗？如果没有，我该怎么做？

我加载 SVG 文件的代码是：

<embed wmode="transparent" id="viewer" src="svg/mouseover.svg" pluginspage="http://www.adobe.com/svg/viewer/install/" type="image/svg+xml" width="100%" height="100%"/>

提前致谢。

【问题讨论】：

标签： javascript html svg raphael

【解决方案1】：

据我所知，raphael 不用于在网页中嵌入现有的 svg。相反，它的目的是允许您使用 javascript 动态创建 svg

见http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

编辑：不过看看https://github.com/wout/raphael-svg-import

【讨论】：

好的，我明白了。你知道我是否可以使用 jQuery SVG 吗？我必须能够管理鼠标事件。

【解决方案2】：

最后，我使用 jQuery SVG (http://keith-wood.name/svg.html) 而不是 RaphaelJS (http://raphaeljs.com/) 找到了解决方案。

这是使用这个插件的代码：

var svgDoc = $(document.getElementById("viewer").getSVGDocument().documentElement);
$(svgDoc.get(0)).svg();
var svg = $(svgDoc).svg('get');

此外，此代码适用于大多数浏览器（IE8、IE9、Firefox 和 Chrome）。

【讨论】：