1

SVGファイルがあります。クリックできる要素があり、クリックすると JavaScript ファイルから関数を呼び出すことができます。Google Chrome、IE、および以前のバージョンの Firefox で完全に動作します。しかし、Firefox 67 以降では動作しません。

私はすでに自分のonmousedown機能をに変更しようとしましたonclick。SVG ファイルを表示する Web サイトを見つけました。また、正常に動作します。

ここにいくつかのコードがあります:

<?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 リンク! Google Chrome では期待どおりに動作しますが、Firefox v-69 では動作しません。

4

2 に答える 2

0

存在しないクリップ パスがあります: clip-path="url(#clip464)"

あなたの例には、id clip464 の要素はありません。

これは既知のバグですが、役に立たない属性を削除することで簡単に回避できます。

于 2019-09-13T08:12:37.910 に答える
-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

于 2019-09-12T17:17:08.907 に答える