Question

我正在通过对象标签加载SVG并需要访问SVG的元素（以操纵它们）。我怎么能这样做？

以下是我所知道的部分解决方案：

使用SVG参数设置参数对象标签和参数化 SVG元素的属性。这个适用于像rect这样的东西，但不是 g（组）我需要移动（采用无法参数化的“变换”，看起来像）。
我见过使用过的建议 contentDocument或getSVGDocument（）在你得到的对象元素上通过getElementById（“yoursvgid”）。不幸的是，也不是工作 - 是的，我在称这些之后加载SVG。

我无法相信没有简单/可靠的方法可以从HTML中搜索SVG元素（在这里搜索/ web） - 真的很感谢这方面的帮助！

或者，如果有某种方法可以在HTML中调用SVG内部定义的函数（反之亦然），那也是这样做的。通常，在SVG和HTML之间进行通信的任何方式。

Answer 1

这是我成功使用的一种技术，在（非常好的）O'Reilly“SVG Essentials”一书中提到：

将JavaScript代码添加到SVG文档本身并处理根svg元素上的load事件。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
<script type="text/ecmascript" xlink:href="svgScript.js" />

在这个svgScript.js加载事件处理程序中，通过内置的parent变量写出需要向HTML端脚本公开的内容。
```
function init(evt) {
    svgDocument = evt.target.ownerDocument;
    parent.theSvgDocument = svgDocument;
}
```
回到HTML端脚本，您现在可以直接访问并使用此参考。
```
var svgDocument = theSvgDocument;
```

在此示例中，我们公开了SVG Document对象，但您可以传递任何对象或函数。在我的项目中，我实际上暴露了某种控制器对象引用，以便我的SVG端脚本包含操作SVG文档的所有逻辑，而HTML端脚本只是抓取这个控制器对象并在其上调用公共方法。

Answer 2

我在这里/其他地方尝试了不同的组合/解决方案，看起来处理SVG的最佳方法是将SVG元素嵌入到HTML中 - 只需确保将其命名为.xhtml。一旦你这样做，你可以简单地导航DOM并做你想做的事情（像yankee建议的那样）。

我已经确认这适用于当前版本的Chrome，FF，Safari，IE和Opera。它也适用于IE8。下面是一个粗略的例子，它有一个按钮和一个渐变条 - 如果你点击按钮，它会把条形变成红色。

<button style="display: block;" onclick="document.getElementById('color').setAttribute('style', 'stop-color:#FF0000');">Color</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="49px" height="376px" viewBox="0 0 49 376" enable-background="new 0 0 49 376" xml:space="preserve">
<g>
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24" y1="376" x2="24" y2="1.0005">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop id="color" offset="1" style="stop-color:#000000"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M48,366c0,5.522-4.477,10-10,10H10c-5.523,0-10-4.478-10-10V11C0,5.477,4.477,1,10,1h28
        c5.523,0,10,4.477,10,10V366z"/>
</g>
</svg>

Answer 3

如果你的选项2）不起作用，我想看看你的例子。您正在测试哪些浏览器？你使用的是svg插件吗？

选项2）是Acid3 test检查的内容之一（子测试＃74）。

Answer 4

你能用SVGweb吗？这是使用'object'标签的an example。我绝不是一个SVGweb的人，但我正在查看Chrome检查器中的示例，我可以看到<g>节点就好了。（另外你内置了IE支持。）

这是另一种依赖（但它们也依赖于IE的条件注释，不确定在您的情况下是否可接受）。

或者，你可以cheat off their source code看看他们是如何做到的。（神圣的废话，他们在那里放了大量的文件！）

是否可以从封闭的HTML中导航SVG对象的元素？

4 个答案: