javascript not working in embed svg file

Question

I just start learning SVG. got this example code from Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM. I change it a little:

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <script type="text/ecmascript">
  <![CDATA[
    function changeRectColor(evt) {
      var red = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }
  ]]>
  </script>
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="changeRectColor(evt)"/>
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>
</body>
</html>

It works just fine. I move to separated SVG file, then js code stop working:

<!DOCTYPE html>
<html>
<body>
<object type="image/svg+xml" data="exampl3a.svg" />   
  <script type="text/ecmascript">
  <![CDATA[
    function changeRectColor(evt) {
      var red = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }
  ]]>
  </script>
</body>
</html>

SVG file: exampl3a.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="changeRectColor(evt)"/>
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>

what should I do?

Thanks Wes

I got the answer from http://stackoverflow.com/questions/5333878/google-chrome-wont-accept-contentdocument-or-contentwindow "contentDocument ... (for svg objects from svg files) will work fine if the code is from a web server, but when I copy the code to a local file, it will not work." — weslleywang, Apr 21 '16 at 19:57
sorry, I forgot step 1: Change document.getElementById("kreis1").setAttribute("fill", "blue"); To document.getElementById("object1").contentDocument.getElementById("kreis1").setAttribute("fill", "blue"); this works Firefox but not Google Chrome — weslleywang, Apr 21 '16 at 19:58
Chrome and Firefox have slightly different security models. Chrome will not allow what you're trying to do. — Robert Longson, Apr 21 '16 at 20:01

score 3 · Accepted Answer · answered Apr 21 '16 at 20:21

If you put svg into a different file, then it will be in another document, and you'll need to bind to that document, using getSVGDocument. And yes, this will still not work in Chrome for local files (only for the website, or unless Chrome is run with corresponding command-line switch).

SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" />
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>

HTML

<!DOCTYPE html>
<html>
<body>
<object id='mySvg' type="image/svg+xml" data="example3a.svg" />
<script type="text/ecmascript">
    function changeRectColor(evt) {
        var red = Math.round(Math.random() * 255);
        evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }

    var obj = document.getElementById('mySvg');
    obj.addEventListener('load', function() {
        var svgDoc= obj.getSVGDocument();
        var elem = svgDoc.getElementById("myBlueRect");
        elem.addEventListener('click', changeRectColor);
    });
</script>
</body>
</html>

score 0 · Answer 2 · answered Sep 17 '21 at 16:26

0

This was my experience: It getSVGDocument works on a server (Github worked), but not for local files. If you have an older computer (Windows XP) it will work on that, too.

answered Sep 17 '21 at 16:26

Avondel

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 17 '21 at 20:33

javascript not working in embed svg file

2 Answers2