Question

我正在尝试通过将其使用的SVG文件移动到对象标记中来使我的html文档成为更愉快的阅读体验。

SVG的部分目的是使其可点击 - 这反过来又改变了它的颜色。这是通过JavaScript完成的。

只要SVG在父html中，但只要我尝试使用对象标记JavaScript getElementById失败（console.log（svg_rectangle）返回null），事情就可以正常工作。我假设DOM一旦移入Object标签就不再知道SVG元素，所以它与范围有关吗？

没有太大的运气在谷歌搜索这个，我不是DOM的专家，所以也许我没有使用正确的关键词。

我正在通过Django运行这个{{STATIC_URL}}。

HTML

<html>
<body>

<object id="svg1" data="{{ STATIC_URL }}svg/test.svg" type="image/svg+xml"></object>

<!--
<svg
id="svg_square"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 height="256"
 width="256"
 version="1.1"
 xmlns:cc="http://creativecommons.org/ns#"
 xmlns:dc="http://purl.org/dc/elements/1.1/">

<g class="region">
    <rect id="rect_front" transform="scale(1,-1)" height="64" width="64" y="-128" x="64" onclick="parent.testFunction(this.id)"/>
</g>
</svg>
-->

<script src="{{ STATIC_URL }}archive_140520/handle_svg.js" type="text/javascript"></script>

</body>
</html>

的JavaScript

function testFunction(id){
    console.log(id)
    var svg_rectangle = document.getElementById(id);
    console.log(svg_rectangle)
    svg_rectangle.style.fill="green"
}

SVG（test.svg）

<svg
id="svg_square"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 height="256"
 width="256"
 version="1.1"
 xmlns:cc="http://creativecommons.org/ns#"
 xmlns:dc="http://purl.org/dc/elements/1.1/">

<g class="region">
    <rect id="rect_front" transform="scale(1,-1)" height="64" width="64" y="-128" x="64"        onclick="parent.testFunction(this.id)"/>
</g>
</svg>

Answer 1

你需要解决contentDocument object以获取其内在元素，尝试类似：

var svg_rectangle = document.getElementById("svg1").contentDocument.getElementById("svg_square");

document.getElementById导致将svg移动到object标记中的null

1 个答案: