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

Question

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

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

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

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

谢谢.

Answer 1

你实际上并不需要 jQuery来编辑SVG(但你可以使用它).使用对象标签包含SVG doc,如下所示:

<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.没有它,你可能会在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页面上的任何内容.