뷰 박스 추가시 마우스 위치 변경

현재 JavaScript 및 SVG를 배우고 있으며 현재 익숙하지 않습니다. 내 시나리오는 다음과 같습니다뷰 박스 추가시 마우스 위치 변경

나는 내부에 SVG가있는 div가 있습니다.

<div id "O_div"> 
    <svg> 
    <line x1= "0" x2 = "0" y1 ="0" y2 ="0"> 
    </line> 
    <svg> 
</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.   
      });

다음 코드를 쓴 그래서 내 DIV에 마우스 위치를 알고 싶어요. 내 SVG의 크기를 조정 resizable.To 쿼리를 사용하여 내 사업부로 크기 조정 기능을 추가 할 때 는하지만 문제가 발생 내 SVG이

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

하지만 지금은 내 마우스 좌표가없는 것 같습니다 it.Now의 뷰 박스 옵션을 추가 잘 작동하고 내 라인은 약간 더 멀리 내 마우스에서 그것은 내가 div 크기를 늘릴 때 내 마우스에서 멀리 간다. 어느 누구도 나를 친절하게 안내해 줄 수 있습니까? 내 svg에 뷰 박스 옵션이있을 때 어떻게 오프셋 위치를 계산해야합니까?

어떤 도움을 주셔서 감사합니다.

출처

2012-07-30 A_user

viewBox가있는 경우 마우스 이벤트는 viewBox를 통해 설정된 좌표계가 아니라 클라이언트 좌표계 값을 제공한다는 것을 기억해야합니다. 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());

변수 p는 이제 요소 엘의 사용자 좌표계에서 마우스 위치가 포함됩니다.

출처

2012-08-13 14:54:32

뷰 박스 추가시 마우스 위치 변경

답변

관련 문제