1

我有一个 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>

编辑1：您可以在此站点上找到一个特殊的代码脚本-> JSFiddle 链接！它可以按预期与 Google Chrome 一起使用，但不适用于 Firefox v-69。

4

2 回答 2

0

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

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

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

于 2019-09-13T08:12:37.910 回答
-1

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

于 2019-09-12T17:17:08.907 回答