How to work with svg files using JS?

E

Enmergal2016-08-13 21:25:50

JavaScript

Enmergal, 2016-08-13 21:25:50

I have a web page that has an svg file loaded into it. It is necessary to give the user the opportunity to interact with this file.
Actually, the code itself. "obj" is the ID of the object inside the svg file, with which you want to "communicate".

<object data="file.svg" type="image/svg+xml" id="file" onload="on_load()"></object>

function on_load() {
    var svgDoc = document.getElementById("file");
    var svg = svgDoc.contentDocument;
    
    obj = svg.getElementById("obj");

    alert("Loaded");
    obj.onclick = alert("Clicked");
}

The first alert is executed, but any attempts to somehow access obj fail.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

L

littleguga, 2016-08-13
@Enmergal

God, I didn't pay attention.
You have obj.onclick = alert(123);
That is, obj.onclick will be equal to what the alert() function returns.
And it should be like this:

obj.onclick = function(){
alert(123)
}

Here is the complete code, try it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var svgDoc = document.getElementById("file");
            svgDoc.addEventListener('load', function () {
                var svg = svgDoc.contentDocument;

                var obj = svg.getElementById("obj");

                alert("Loaded");

                obj.addEventListener('click', function () {
                    alert("Clicked");
                });
            });
        });
    </script>
</head>
<body>
<object id="file" data="test.svg" type="image/svg+xml"></object>
</body>
</html>

T

trushka, 2016-08-13
@trushka

To interact, it's better to use an iframe rather than an object.

E

Enmergal, 2016-08-13
@Enmergal

Show file.svg

You are welcome:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="200"
   height="200"
   viewBox="0 0 200 200"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="file.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="73.898371"
     inkscape:cy="80.549681"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-852.36216)">
    <rect
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.704;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="obj"
       width="80"
       height="80"
       x="0"
       y="972.36212"
       inkscape:label="" />
  </g>
</svg>