5

私は現在、JavaScript と SVG を学習して作業していますが、これは初めてです。これが私のシナリオです

内部に SVG がある div があります。

<div id "O_div">
  <svg>
     <line x1= "0" x2 = "0" y1 ="0" y2 ="0">
     </line>
  <svg>
</div>

div に対するマウスの位置を知りたいので、次のコードを書きました。

odiv = document.querySelector('#O_div');

XOffset = $(Odiv).position().left;
YOffset = $(Odiv).position().top;

   // And on my mouse move event 
            $('#O_div').mousemove(function(event) {
                var mouseX = event.clientX - XOffset;
                var mouseY = event.clientY - YOffset;
               // Here I am setting my line x and y coordinate equal mouseX and mouseY
               //So that line moves according to mouse move movement.           
            });

正常に動作しています。しかし、クエリ resizable を使用して div にサイズ変更機能を追加すると、問題が発生します。svg のサイズを変更するには、viewBox オプションを追加しました。

<svg viewBox="0 0 450 154" preserveAspectRatio="xMinYMin meet">
</svg>

しかし、マウスの座標がうまく機能せず、ラインがマウスから少し離れてしまい、div サイズを大きくすると、マウスからさらに離れてしまいます。svgにビューボックスオプションがある場合、オフセット位置を計算する方法を教えてください。

ヘルプとガイダンスに感謝します。

4

1 に答える 1

11

viewBoxがある場合は、マウスイベントが、viewBoxを介して確立された座標系ではなく、クライアントの座標系で値を提供することを覚えておく必要があります。このブログ投稿はこれを少し説明するのに役立つかもしれません、そしてここに例があります。

つまり、現在のユーザースペースの座標を取得するために必要なことは次のとおりです。

var m = El.getScreenCTM();

// note: assumes the root is an <svg> element, replace 
// document.documentElement with your <svg> element.
var p = document.documentElement.createSVGPoint(); 

p.x = evt.clientX;
p.y = evt.clientY;
p = p.matrixTransform(m.inverse());

これで、変数pには、要素Elのユーザー座標系でのマウスの位置が含まれます。

于 2012-08-13T14:54:32.957 に答える