我的 SVG 元素在 Firefox Quantum 67.0 中不再可点击

Question

我有一个 SVG 文件。有些元素可以单击，单击时可以调用 JavaScript 文件中的函数。它与 Google Chrome、IE 和早期版本的 Firefox 完美配合。但是我无法让它与 Firefox 67 或更高版本一起使用。

我已经尝试将 onmousedown 函数更改为 onclick。我找到了一个网站来查看我的 SVG 文件。它也很好用。

这是一些代码：

<?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：您可以在此站点上找到特定的代码脚本 -> JSFiddle link！它与预期的 Google Chrome 一起使用，但不适用于 Firefox v-69。

Answer 1

我不确定您是否可以引用 SVG 之外的任何 JS。我在 Chrome 上试过你的代码。在 SVG 中包含所有 JS 代码按预期工作。

或者，您也可以从 SVG 外部附加事件侦听器。查看下面的代码：

SVG中的所有JS

<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>

SVG 之外的 JS

<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

Answer 2

您有一个不存在的剪辑路径：剪辑路径="url(#clip464)"

您的示例中没有 ID 为 clip464 的元素。

这是一个 known bug，但您可以通过删除无用的属性轻松解决它。

我的 SVG 元素在 Firefox Quantum 67.0 中不再可点击

My SVG elements are not clickable anymore with Firefox Quantum 67.0

html

javascript

svg

firefox-quantum