Question

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

所以我想也许我可以使用一些框架，我试过拉斐尔，但我需要我将我的SVG转换为另一种形式，拉斐尔会为我渲染图像。但奇怪的是，在我改变SVG图像后，图像变小了。我无法弄清楚出了什么问题。

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

任何人都可以提出一些建议来实现这样的目标吗？

感谢。

Answer 1

您实际上并不需要需要 jQuery来编辑SVG（但您可以使用它）。使用对象标签包括SVG doc，如下所示：

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

然后，您可以通过获取document来操纵SVG的DOM：

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

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

请注意onload的使用。没有它，你可能会在SVG完全加载之前运行JS（特别是如果你在SVG中使用图像）。

一旦确定加载了SVG，就可以在onload语句之外的JavaScript中使用它。

另一方面，如果您想直接在SVG中嵌入JavaScript，可以像往常一样使用<script>标记，但需要注意：如果需要外部JS，则需要使用xlink（如下例所示）导入jQuery）

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

内部JS可以描述如下：

如果您决定使用此功能，请务必在开场xlink标记中定义<svg>，如此（请勿更改网址）：

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

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

Answer 2

我已经投了@SomeKittens的答案，因为这是你正在寻找的正确方法，但另一种选择是Ready Set Raphael：它为你的SVG提供Raphael代码然后你可以像任何其他Raphael JS一样使用它。（显然你应该包括Raphael使用它）。如果要引用独立元素，则仍需要计算变量名称。

交互式SVG在HTML中，正确的方式

2 个答案: