javascript - JavaScript 访问 SVG 的内部 DOM

Question

test.php是使用 PHP 生成的 SVG 对象。

<object data="test.php" type="image/svg+xml" id="SVG" />
<script>
    var mySVG = document.getElementById("SVG");
    var svgDoc = mySVG.contentDocument;

svgDoc一片空白。（所以我无法通过 JS 访问 svg 的元素。）看看这个问题，它应该可以工作。 我究竟做错了什么？我怎样才能得到contentDocument我的 SVG？

Answer 1

您需要等到 SVG 加载完毕，然后才能访问 contentDocument：

 var mySVG = document.getElementById("SVG");
 var svgDoc;
 mySVG.addEventListener("load",function() {
      svgDoc = mySVG.contentDocument;
      alert("SVG contentDocument Loaded!");
 }, false);

Answer 2

不确定这是一个答案，但它对我有用。我遇到了同样的问题并且svgObject正在返回null：

var svgObject = document.getElementById('svgObject').contentDocument;

然后我突然想到我在本地运行我的 html 页面：file:///C:/wwwroot/App_dev/OverLay/Overlay03.html

从服务器运行它： http://localhost:62551/App_dev/OverLay/Overlay03.html

它完美地工作并svgObject返回了它的内容，然后我可以得到div它的内部。