mousemove中のevent.offsetX

Question

私は要素の上にマウスを動かすと、offsetXの位置を見つける必要があります。問題は、私がマウスを動かすと、内部にある子要素の値が得られていることです。子のターゲットにマウスを移動しても、メインオブジェクトのマウスの位置を特定することは可能ですか？

event.pageX私は要素にtransform: scale(1)を使用しているため、私はevent.pageXを使用できません。

$('.main').on('mousemove', function(event) { 
 
    event.preventDefault(); 
 
    $(this).closest('.outer').find('p').html(event.offsetX); 
 
});

<style> * { 
 
    margin: 0; 
 
} 
 
.outer { 
 
    border: 1px solid #ff0000; 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    overflow: hidden 
 
} 
 
.inner > svg { 
 
    width: 100; 
 
    height: 100px; 
 
} 
 
.inner { 
 
    -ms-transform: scale(1); 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    transform-origin: 0 0; 
 
} 
 
.two { 
 
    -ms-transform: scale(1.5); 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
} 
 
.three { 
 
    -ms-transform: scale(.5); 
 
    -webkit-transform: scale(.5); 
 
    transform: scale(.5); 
 
} 
 
p { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="inner one"> 
 
    <svg style="border:1px solid #000" class="main"> 
 
     <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> 
 
     <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> 
 
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
      <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> 
 
      <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> 
 
       <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> 
 
       <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> 
 
       </div> 
 
      </foreignObject> 
 
      </svg> 
 
     </foreignObject> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
    <p>Value</p> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="inner two"> 
 
    <svg style="border:1px solid #000" class="main"> 
 
     <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> 
 
     <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> 
 
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
      <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> 
 
      <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> 
 
       <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> 
 
       <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> 
 
       </div> 
 
      </foreignObject> 
 
      </svg> 
 
     </foreignObject> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
    <p>Value</p> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="inner three"> 
 
    <svg style="border:1px solid #000" class="main"> 
 
     <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> 
 
     <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> 
 
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
      <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> 
 
      <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> 
 
       <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> 
 
       <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> 
 
       </div> 
 
      </foreignObject> 
 
      </svg> 
 
     </foreignObject> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
    <p>Value</p> 
 
</div>

Answer 1

下記のように私は変更してスクリプトを答えを見つけました。

$('.main').on('mousemove', function(event) { 
     event.preventDefault(); 
     if($(event.target).attr('class')== 'main') 
      $(this).closest('.outer').find('p').html(event.offsetX); 
     else{ 
      var val = parseInt($(event.target).closest('g').attr('transform').split(/[()]/)[1].split(',')[0]); 
      $(this).closest('.outer').find('p').html(event.offsetX+val); 
     } 
    });