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.

score 0 · Accepted Answer · answered Sep 13 '19 at 08:12

0

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.

answered Sep 13 '19 at 08:12

Robert Longson

118,664
26
252
242

Shishir · Answer 2 · 2019-09-12T17:52:15.753

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

Hi, I actually can reference the JS outside the SVG. It also works when I run my onclick function on the console. I just cannot understand what has changed with Firefox 67.0 and how I can make it work. — eozk, Sep 13 '19 at 06:19
Interesting. It's not working for me on Chrome at all. Can you check if this sample is working for you: https://jsfiddle.net/m4gnzcx7/ — Shishir, Sep 13 '19 at 08:32
I see the edit you've made. The JSFiddle link you've added has all the JS code inside the SVG just like my example. — Shishir, Sep 13 '19 at 08:35
Nope, it is not working too. I added it to my question so that other users can understand the situation more clearly. I hope it is not a problem for you. — eozk, Sep 13 '19 at 09:27
Hi again, as Robert said in his answer, it was solved when I removed the useless attribute 'clip-path'. You can check his answer. Thank you for your interest. — eozk, Sep 13 '19 at 13:20
Hey. I'm glad you were able to get a solution. Please consider sharing a JSFiddle of your final working solution. I'm sure it'll help anyone who has the same problem. Cheers! — Shishir, Sep 14 '19 at 11:13

My SVG elements are not clickable anymore with Firefox Quantum 67.0

2 Answers2