JavaScript 访问 SVG 的内部 DOM

IT技术 javascript dom svg
2021-01-21 21:28:12

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?

2个回答

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

 var mySVG = document.getElementById("SVG");
 var svgDoc;
 mySVG.addEventListener("load",function() {
      svgDoc = mySVG.contentDocument;
      alert("SVG contentDocument Loaded!");
 }, false);
它对我不起作用,我总是为空
2021-03-22 21:28:12
我还发现(除了上述之外)当我尝试通过这样的方式访问 svg 时它返回 null:(data="../otherdir/images/mysvg.svg"至少在本地,目前无法在线测试),虽然data="images/mysvg.svg"有效。
2021-04-05 21:28:12

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

要设置端口,请执行以下操作 python -m http.server 8001
2021-03-18 21:28:12
谢谢你。这对 Firefox 也有影响。
2021-03-30 21:28:12
谢谢你的提示。这也咬我!python3 -m http.server来救援!
2021-04-03 21:28:12
就是这个!这标志着许多小时的调试结束,谢谢!
2021-04-09 21:28:12