Jquery html中的交互式SVG，正确的方法

我需要在我的html文档中包含一个SVG图像（一个映射），希望我可以使用JQuery来操作它。我在互联网上查到了这一点，有人说不能直接操作SVG。有人建议使用Keith Wood的JQuery SVG插件，但我无法打开它。下面是一个例子，说明可以将SVG代码直接包含到html5中。一方面，我的SVG代码有点长，所以如果我把代码放在那里看起来很糟糕，另一方面，即使我这样做了，我仍然不知道如何操作它

所以我想也许我可以使用一些框架，我尝试了Raphael，但我需要我将SVG转换成另一种形式，Raphael会为我渲染图像。但奇怪的是，在我更改SVG图像后，图像变得更小了。我很难弄清楚到底出了什么问题

我想要实现的目标与admob.com中的目标非常相似。此页面似乎直接在页面中包含SVG代码

有人能给我一些建议来实现这样的目标吗

谢谢。

您实际上不需要jQuery来编辑SVG（但您可以使用它）。使用如下所示的对象标记包括SVG文档：

<object data="mySVG.svg" type="image/svg+xml" id="mySVG"></object>

注意

onload

的使用。如果没有它，当JS在SVG完全加载之前运行时，很可能会出现错误（特别是在SVG中使用图像时）

一旦确定SVG已加载，就可以在

onload

语句之外的JavaScript中使用它

另一方面，如果您希望将JavaScript直接嵌入SVG中，您可以像往常一样使用

标记，但有一个警告：如果需要外部JS，则需要使用xlink（如下面导入jQuery的示例）

---

但是，请记住，SVG中直接出现的JS在HTML页面上看不到任何内容。

我对@SomeKittens的答案投了赞成票，因为这是实现您所需的正确方法，但另一种选择是：它为您的SVG提供Raphael代码，然后您可以像其他Raphael JS一样使用它。（显然你应该包括拉斐尔来使用这个）。如果要引用独立元素，还必须找出变量名称。

admob.com要我登录。您可以提供一个不需要我创建另一个帐户的示例吗？您是否需要将SVG托管在与HTML分开的文件中，或者您可以将SVG直接（内联）嵌入到文档中？这个问题的答案会改变你如何实现目标。@Phrogz直接在文档中

var svgObject = document.getElementById("mySVG");

moSVG.onload = function(){
    var svgDoc = moSVG.contentDocument;
    //Do SVG manipulation here, using svgDoc instead of document
}

<script type="text/ecmascript" xlink:href="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">