Search code examples
javascripthtmlsvgfirefox-quantum

My SVG elements are not clickable anymore with Firefox Quantum 67.0


I have an SVG file. There are elements that can be clicked and can call functions from a JavaScript file when clicked. It works perfectly with Google Chrome, IE and earlier versions of Firefox. But I cannot make it work with Firefox 67 or later.

I have already tried to change my onmousedown function to onclick. I have found a website to view my SVG file. It also works fine.

Here is some code:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     height="106.892mm"
     viewBox="0 0 1370.4 484.8"
     width="302.154mm">
   <g fill="none" fill-rule="evenodd" stroke="black" stroke-linecap="square"
      stroke-linejoin="bevel"
      stroke-width="1">

      <g clip-path="url(#clip464)" cursor="pointer" fill="green" fill-opacity="1"
         onmousedown="parent.OpenPane('mGraph');"
         opacity="1"
         stroke="none"
         stroke-opacity="0"
         transform="matrix(1,0,0,1,392,262)">
         <path d="M0,0 L30,0 L30,32 L0,32 L0,0 z" fill-rule="evenodd" vector-effect="none"/>
      </g>
   </g>
</svg>  

edit1: you can find a spesific code script on this site -> JSFiddle link! It works with Google Chrome as expected, but not with Firefox v-69.


Solution

  • You have a clip-path that does not exist: clip-path="url(#clip464)"

    There is no element with id clip464 in your example.

    This is a known bug but you can work around it easily by removing the useless attribute.