access SVG from Javascript does not work

Question

I have been following the examples regarding accessing SVG elements using Javascript but I cannot get it to work. What is wrong with this code?

Javascript:

var objTag = document.getElementById('esc-seconds-1s');
objTag.addEventListener('load', function() {
    var svgDoc = objTag.contentDocument;
    var cc3 = svgDoc.getElementById('cc3');
    cc3.setAttribute('fill', 'red');
}, false);

I get the following console error:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

I think the error is a bit miss leading. The error comes from the contentDocument line so I don't think it is because of the same origin policy. Also, I do not have any xlink lines in the SVG file. This is the top of my SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

The SVG displays properly, so why does the objTag.contentDocument call fail?

The html:

<object class="esc-seven-segment" id="esc-seconds-1s"
     type="image/svg+xml" data="images/seven-segment-digit.svg"></object>

Thanks,

-Andres

See: [Receive Uncaught SecurityError when accessing SVG objects from Javascript](https://stackoverflow.com/questions/24644657/receive-uncaught-securityerror-when-accessing-svg-objects-from-javascript) — Alexander O'Mara, May 17 '15 at 04:54

score 7 · Accepted Answer · edited May 23 '17 at 12:34

7

Are you using Chrome and working from local files (ie. file://)?

Using iframe with local files in Chrome

Either run a local webserver (http://localhost/) or try testing with a different browser.

edited May 23 '17 at 12:34

Community

1
1

answered May 17 '15 at 04:45

Paul LeBeau

97,474
9
154
181

bingo, that was it. Thank you Paul for your response--that cleared up the error. – Andres Gonzalez May 18 '15 at 11:40

access SVG from Javascript does not work

1 Answers1