My SVG elements are not clickable anymore with Firefox Quantum 67.0

Question

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.

Answer 1

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.

Answer 2

I'm not sure you can reference any JS outside the SVG. I tried your code on Chrome. Including all JS code inside the SVG works as expected.

Alternatively, you can also attach event listeners from outside the SVG. Check out the code below:

All JS inside the SVG

<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">
     <script type="text/ecmascript"><![CDATA[
        function OpenPane(str) {
            alert(str);
        }
     ]]>
     </script>
   <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="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>

JS outside SVG

<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"
         id="sample-id"
         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> 

<script type="text/ecmascript">
    const el = document.getElementById('sample-id');

    el.addEventListener('click', () => {
        document.getElementById('sample-id').setAttribute('fill', 'red');
    });

    el.addEventListener('mouseleave', () => {
        document.getElementById('sample-id').setAttribute('fill', 'green');
    });
</script>

JSFiddle