jquery - HTML 中的交互式 SVG，正确的方法

Question

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

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

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

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

谢谢。

Answer 1

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

<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 页面上的任何内容。