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

我正在通过对象标记加载SVG，需要访问SVG的元素（以操作它们）。我该怎么做

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

在设置参数的位置使用SVG参数 用于对象标记和参数化 SVG元素的属性。这 对于rect之类的东西非常有用，但对于 我需要移动的g（组）（需要一个无法参数化的“变换”，看起来像）

我看到了一些使用建议 contentDocument或getSVGDocument（） 在您得到的对象元素上 通过getElementById（“yoursvgid”）。 不幸的是，两者都不是 工作——是的，我给这些打电话 加载SVG之后

我不敢相信没有简单/可靠的方法可以从HTML（在这里搜索/web）中访问SVG元素-非常感谢您的帮助

或者，如果有某种方法可以从HTML中调用SVG中定义的函数（反之亦然），也可以这样做。一般来说，SVG和HTML之间的任何通信方式。

如果您的选项2）不起作用，我希望看到您的示例。你在测试什么浏览器？您正在使用svg插件吗

---

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

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

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

<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" />

回到HTML端脚本中，您现在可以直接访问和使用此引用

var svgDocument = theSvgDocument;

---

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

你能用SVGweb吗？下面是使用“object”标记的示例。我绝不是一个SVGweb的家伙，但我在Chrome inspector中查看了这个示例，我可以看到

节点。（此外，还内置了IE支持。）

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

---

或者，你可以去看看他们是怎么做的。（天哪，他们在那里放了很多文档！）

我尝试了这里/其他地方建议的不同组合/解决方案，看起来处理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>

颜色

嗯。。。如果对象标记…当然，您知道您可以使用内联SVG吗？是的，但我也在尝试达到IE8（不幸的是，我现在还不能忽略IE8）。或者IE8也有内联解决方案吗？不确定Acid3测试的事情。我的代码在Chrome9上的contentDocument和getSVGDocument（）都没有定义，但是Acid3测试给出了100/100。我已经在其他浏览器上测试过了，FF3.6/IE9/Opera11都为这两种浏览器都提供了object——所以问题只是在Chrome上（没有检查其他浏览器，特别是IE8）。谢谢，是的，我也尝试过这个（SVG中的父级），但值没有传递到HTML（变量未定义）。同样，这是在Chrome（v9）上；例如，它在FF3.6上工作正常。

<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>