2

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

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

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

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

谢谢。

4

2 回答 2

10

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

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

然后，您可以通过以下方式操作 SVG 的 DOM document：

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

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

注意使用onload. 没有它，当 JS 在 SVG 完全加载之前运行时，您可能会遇到错误（特别是如果您在 SVG 中使用图像）。

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

另一方面，如果你想将 JavaScript 直接嵌入到 SVG 中，你可以<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>标签中定义如下（不要更改 url）：

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

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

于 2012-07-27T15:18:24.737 回答
0

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

于 2012-07-27T17:47:18.390 回答