Home/ Questions/Q 8778799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T19:37:05+00:00

I have a click event bound to a div element, inside this div I

  • 0

I have a click event bound to a div element, inside this div I am embedding an SVG file using an iframe (I have tried with object/embed elements an the result is the same) like so:

<div id="example">
 <iframe src="example.svg" type="image/svg+xml" width="100%" height="100%"></iframe>
</div>

When I add the iframe element, it’s parents click event no longer fires.

If I embed the SVG in an IMG element all is fine but the svg scaling no longer works correctly.

Is there an elegant workaround for this?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can try to mask the iframe

    <html>
  <head>
    <style type="text/css">
      #wrapper {
        width:1000px;
        height:600px;
        position:relative;
      }
      #wrapper:after {
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div id="wrapper" onclick="alert('hi mondo');">
      <iframe src="harvest.svg" type="image/svg+xml" frameborder="0"
              style="width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

    the problem with this solution is that the context menu isn’t relative to the image anymore.

    • 0