26

onclickこの例は、SVG 要素のイベント ハンドラーを使用する方法を説明する SVG チュートリアルで見つけました。以下のコードのようになります。

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

  <script type="text/ecmascript"><![CDATA[
      function changerect(evt)
      {
        var svgobj=evt.target;
        svgstyle = svgobj.getStyle();
        svgstyle.setProperty ('opacity', 0.3);
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>

  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
        height='100' />
</svg>

ただし、これは機能しないようです。要素をクリックしても何も起こりません。

を使用して、PHP スクリプト内から SVG を表示しているという事実に言及することはおそらく重要ですecho。また、PHP スクリプトによって生成されたコンテンツは、AJAX と を使用してページに取り込まれることに注意してくださいXMLHttpRequest()。

これは何か関係があるのではないでしょうか？助けてくれてありがとう。

4

8 に答える 8

28

SVG を実行するには、すべての JavaScript を SVG 内に含める必要があるようです。外部関数やライブラリを参照できませんでした。これは、コードが壊れていたことを意味しますsvgstyle = svgobj.getStyle();

これはあなたが試みていることを行います。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

  <script type="text/ecmascript"><![CDATA[
      function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>

  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>

于 2013-05-09T23:27:54.480 に答える
0

に必ず追加className/idしてください<use>。または、SVG スクリプトの範囲外を検出している場合は、実際の SVG パス/要素も使用します。

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>
于 2015-03-31T10:46:51.833 に答える
0

onclicksvg 要素のイベント ハンドラーのこのメソッドをお勧めします。

var svgobj = parent_svg.find('svg')[0].children;

for (i = 0; i < svgobj.length; i++) {
   element = svgobj[i];
   element.style = "cursor: pointer;";
   $(element).click(function(evt){console.log($(this))});
}

イベント ハンドラーを取得するときに、svgobjが渡されるかどうかを最初に確認します。その時点から、要素を処理する関数に渡すことができます。 console.logonclick

ここのサンプルでどのように機能するかを確認できます。

https://jsfiddle.net/chetabahana/f7ejxhnk/20/

このサンプルの使用方法に関する注意事項:
- SVG ダイアグラムのステータスを[印刷済み] オプションに変更します。
- 要素の 1 つをクリックして、コンソールで出力を確認します。

于 2018-05-13T17:28:36.020 に答える