结合 SVG、HTML 和 Javascript答案

【问题标题】：Combining SVG, HTML and Javascript结合 SVG、HTML 和 Javascript
【发布时间】：2013-01-11 17:45:37
【问题描述】：

我有一个看起来像这样的 HTML 文件：

<html>
 <div id="test"> ... </div>
 <object data="pic.svg" [...]></object>
</html>

在 pic.svg 中，我有一个元素，比如说一个圆圈，我想实现类似的东西：

<circle onClick="doSomething()" [...]>

现在，在 js 函数 doSomething() 中（即当有人点击圆圈时）我想更改我的“测试”-div。如何做到这一点？

【问题讨论】：

标签： javascript html svg

【解决方案1】：

您可以像这样从 svg 内部访问父文档（以及那里的元素）：

var divInParentDocument = window.parent.document.getElementById('test');

这是一个（稍微复杂一点的）example，展示了如何从 svg 内部调用父 html 文档中的函数。

【讨论】：

【解决方案2】：

如果您希望 SVG 与 HTML 存在于相同的 DOM 中，最好使用嵌入的 <svg> 元素。很漂亮well supported。

类似

<svg id="svgroot" width="600" height="600"
     version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript">//<![CDATA[
   function doSomething() {
       document.getElementById('test').appendChild(...);
   }
//]]></script>

<circle onClick="doSomething()" />
</svg>

【讨论】：

不幸的是，我的 svg 文件很大，所以我想避免在 HTML 文件中包含 svg 代码...
@vauge 这就是xlink 的用途。您可以只链接外部 SVG。