जब दृश्य बॉक्स जोड़ा जाता है तो माउस स्थिति में बदलें

Question

मैं वर्तमान में जावास्क्रिप्ट और एसवीजी में सीख रहा हूं और काम कर रहा हूं और मैं इसके लिए नया हूं। यहां मेरा परिदृश्य है

मेरे पास एक 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.   
      }); 

यह ठीक काम कर रहा है निम्नलिखित लिखा चाहते हैं। लेकिन समस्या यह है कि जब मैं क्वेरी का उपयोग कर मेरी svg का आकार बदलने के resizable.To मेरी div करने के लिए एक आकार बदलने कार्यक्षमता जोड़ने उठता है मैं it.Now में एक viewBox विकल्प मेरी svg की तरह इस

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

लेकिन अब मेरी माउस समन्वय नहीं कर रहे हैं लग रहा है जोड़ा ठीक काम कर रहा है और मेरी रेखा मेरे माउस से थोड़ा आगे है और जब मैं div आकार बढ़ाता हूं तो यह मेरे माउस से बहुत दूर चला जाता है। क्या कोई मुझे कृपया मार्गदर्शन कर सकता है कि मुझे अपने ऑफ़सेट स्थितियों की गणना कैसे करनी है जब मेरे पास मेरे svg में व्यूबॉक्स विकल्प है।

धन्यवाद किसी भी मदद और मार्गदर्शन की सराहना की जाएगी।

Answer 1

यदि आपके पास व्यूबॉक्स है तो आपको याद रखना होगा कि माउस ईवेंट क्लाइंट समन्वय प्रणाली में मूल्य प्रदान करते हैं, न कि व्यूबॉक्स के माध्यम से स्थापित समन्वय प्रणाली। This blogpost इसे थोड़ा सा समझाने में मदद कर सकता है, और यहां एक example है।

संक्षेप में, क्या आप वर्तमान उपयोगकर्ता अंतरिक्ष में निर्देशांक पाने के लिए क्या करने की जरूरत यह है:

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

चर पी अब उपयोगकर्ता में माउस की स्थिति में शामिल होंगे तत्व एल की समन्वय प्रणाली।