JavaScript访问SVG的内部DOM

Som*_*ens 20 javascript svg dom

test.php 是一个用PHP生成的SVG对象.

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

svgDoc一片空白.(因此我无法通过JS访问svg的元素.)它应该工作,看看这个问题. 我究竟做错了什么?我怎样才能得到contentDocument我的SVG?

blu*_*er9 28

您需要等到加载SVG,然后才能访问contentDocument:

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

  • 它对我不起作用,我总是 null (3认同)

小智 7

不确定这是否是答案,但对我有用。我有同样的问题,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它的内部。

  • 感谢您的提示。这也咬了我!python3 -m http.server来解救! (3认同)