Görüntüleme kutusu eklendiğinde fare pozisyonunda değişiklik yapma

Question

Şu anda JavaScript ve SVG'de öğreniyorum ve çalışıyoruz ve bu konuda yeniyim. İşte benim durumum

İçinde SVG olan bir div var.

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

Şimdi ben O iyi çalışıyor

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.   
      }); 

kodu aşağıdaki yazdı yani benim div fare konumunu bilmek istiyorum. Benim svg boyutlandırmak resizable.To sorgu kullanarak benim div yeniden boyutlandırma işlevsellik eklediğinizde Ama sorun doğar benim svg bu

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

Ama şimdi benim fare koordine olmayan benziyor it.Now bir ViewBox seçeneği eklendi iyi çalışıyor ve hattım faremden biraz daha ileride ve div boyutunu arttırdığımda fareden daha uzağa gider. Herhangi biri bana rehberlik ofset pozisyonlarımı hesaplamak zorunda nasıl olabilir Benim svg bir viewbox seçeneğim var.

Yardımlarınız ve önerileriniz için teşekkür ederiz.

Answer 1

Eğer bir viewBox'ınız varsa o zaman mouse olaylarının viewBox aracılığıyla kurulan koordinat sistemi değil, istemci koordinat sisteminde değerler sağladığını hatırlamanız gerekir. This blogpost bunu açıklamaya yardımcı olabilir ve işte bir example. Kısacası

, ne geçerli kullanıcı uzayda koordinatları almak için yapmanız gereken şudur:

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()); 

değişken p şimdi elemanın El ait koordinat sisteminde kullanıcı fare konumunu içerecektir.