Click handler for SVG embedded using <object> tag

I have the following SVG with two rectangles

<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg1">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <rect id="rec2" height="145" width="229" y="240" x="294" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

I am trying to a click event handler to the 'rect' elements using

<html>
    <head>
        <script src="http:///code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <object data="Bild1.svg" style="width: 600px" id="mysvg"/>

        <script type="text/javascript">

            $(document.body).on('click','#mysvg rect', function() {
                alert('click');
            });

        </script>
    </body>

</html>

or using

<html>
    <head>
        <script src="http:///code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <object data="Bild1.svg" style="width: 600px" id="mysvg"/>

        <script type="text/javascript">

        $("#mysvg")[0].addEventListener('click', function(e) {
          // do nothing if the target does not have the class drawnLine
          console.log($(this).data('index'));
        });

        </script>
    </body>

</html>

as described in

Event delegation on SVG Elements

None of the code above is working..

Any insight?

Answers


Have you tried doing it in a different way? Notice the display="none"

<?xml version="1.0" ?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" display="none">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g id="rec1">
    <title>Layer 1</title>
    <rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000" />
    <rect id="rec2" height="145" width="229" y="240" x="294" stroke-width="5" stroke="#000000" fill="#FF0000" />
</g>

<!---Somewhere in the body--->

<div>
<svg class="rec1">
    <use xlink:href="#rec1"></use>
</svg>
</div>

jQuery:

  $(document.body).on('click', '.rec1', function () {
  alert('click');
  });

css:(I just entered a big size for testing)

 .rec1 {
width:1000px;
height:1000px
}

It works for me. I hope it helps


add onclick event to the rect object

<rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000" onclick='yourFunction()' />

Need Your Help

node.js app on the heroku platform

node.js heroku web

I created a simple Node.js app following the tutorial offered by Heroku. When I try to run the command heroku ps:scale worker=1 from within the application folder I get the following error message: