JavaScript accessing inner DOM of SVG

Question

test.php is a SVG object that's being generated with PHP.

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

svgDoc is null. (and so I can't access the elements of the svg via JS.) It should work, looking at this question. What am I doing wrong? How can I get the contentDocument of my SVG?

Did you notice, that in the referred answer, the script is executed after the `load` event on the SVG fired? Maybe that's your problem. — Sirko, Jul 11 '12 at 14:34

bluetiger9 · Accepted Answer · 2012-07-11T15:03:14.670

39

You need to wait until the SVG is loaded and than you can access the contentDocument:

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

edited Jul 11 '12 at 15:03

answered Jul 11 '12 at 14:37

bluetiger9

718
7
16

I also found (in addition to above) that it returned null when I was trying to access a svg via something like this: `data="../otherdir/images/mysvg.svg"` (at least locally, can't test online at the moment), though `data="images/mysvg.svg"` works. – Max Starkenburg May 01 '16 at 06:35
3

It does not work for me, I get always null – May 24 '21 at 12:49

score 21 · Answer 2 · answered Dec 11 '18 at 00:39

21

Not sure this is an answer, but it worked for me. I had the same problem and svgObject was returning null:

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

Then it occurred to me that I was running my html page locally: file:///C:/wwwroot/App_dev/OverLay/Overlay03.html

Running it from the server: http://localhost:62551/App_dev/OverLay/Overlay03.html

It worked flawlessly and svgObject returned its content, then I could get the div inside it.

answered Dec 11 '18 at 00:39

6

Thanks for the hint. This also bit me! `python3 -m http.server`to the rescue! – Tom Pohl Feb 12 '19 at 14:52
This is it! This marks the end of many hours of debugging, thank you! – ralien Nov 29 '19 at 13:13
1

Thank you. This bit me on Firefox, too. – user3107036 Apr 23 '20 at 17:13
1

To set the port, do something like `python -m http.server 8001` – Brian Burns Apr 26 '20 at 14:20

JavaScript accessing inner DOM of SVG

2 Answers2

Linked

Related