0

I don't have much experience with coding and I'm trying to give a user some control over an SVG embedded in an element. I found the ariutta svgpanzoom.js library, but when I try to make a small test with it, I have a security error in chrome (everything works well with Firefox and Safari)

Here's my basic code 

  
<!DOCTYPE html>
<html>
<head>
 <title>SVG test</title>
 <meta charset="utf-8">
 <script src="http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
</head>
<body>
 <p><h1>Test SVG in object tag</h1></p>
 <br>
 <object id="mySVG" type="image/svg+xml" data="../Tests/simpleSVG.svg" width="400" height="400" style="border: 1px solid red;"></object>
 
 <script>
      window.onload = function() {
        svgPanZoom("#mySVG", {
          zoomEnabled: true,
          controlIconsEnabled: true
        });
      };
    </script>

</body>
</html>

The error I get on Chrome is: 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.

Does anyone have an idea of what I did wrong ?

Thanks in advance...

MzTr
  • 11
  • 4
  • Do you use a local server? Or you just opened the page from a folder? As SVG is considered as another document, Chrome may block the access to local documents (Object in your case) from remote scripts (svg-pan-zoom). – bumbu Oct 21 '15 at 08:39
  • That's right: when I put the files on a local server, Chrome doesn't show an error. Thank you for your answer bumbu – MzTr Oct 22 '15 at 09:30

1 Answers1

0

Bumbu is right : Chrome blocks the access to local documents (Object in this case) from remote scripts (svg-pan-zoom).

The code works well when run from a local server.

MzTr
  • 11
  • 4