svg içinde daire içindeki öğeleri bul

Question

circle koordinatlarının arasında gelen öğeleri bulmaya çalışıyorum. i stil istediğiniz fare konumuna göre canlandıran bir daire var Fiddle yılında /I eğer kontrol ettikten

var s = Snap('svg') 
 
for (var x = 10; x < 500; x = x + 30) { 
 
    for (var y = 10; y < 500; y = y + 30) { 
 
    var circle = s.circle(x, y, 5) 
 
    circle.attr({ 
 
     fill: 'black' //'#8BFE03' 
 
    }) 
 
    } 
 
} 
 
s.mousemove(function(e) { 
 
    $('.circle').attr({ 
 
    cx: e.pageX, 
 
    cy: e.pageY 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
<svg width="1500" height="1500" id="svg"> 
 
    <circle class="circle" cx="0" cy='0' r='80' /> 
 
</svg>

Answer 1

büyük dairenin alanı içinde gelip tüm küçük Çevre seçmek küçük olanlardan koordinat büyük birinde olup olmadığını bu yüzden renk değiştirmek gelmiş

var s = Snap('svg') 
 
    for (var x = 10; x < 500; x = x + 30) { 
 
     for (var y = 10; y < 500; y = y + 30) { 
 
     var circle = s.circle(x, y, 5) 
 
     circle.attr({ 
 
      fill: 'black', //'#8BFE03' 
 
      class: 'small' 
 
     }) 
 
     } 
 
    } 
 
    s.mousemove(function(e) { 
 
     $('.circle').attr({ 
 
     cx: e.pageX, 
 
     cy: e.pageY 
 
     }) 
 
     rangeX1=parseInt($(".circle").attr("cx"))+parseInt($(".circle").attr("r")); 
 
     rangeX2=parseInt($(".circle").attr("cx"))-parseInt($(".circle").attr("r")); 
 
     rangeY1=parseInt($(".circle").attr("cy"))+parseInt($(".circle").attr("r")); 
 
     rangeY2=parseInt($(".circle").attr("cy"))-parseInt($(".circle").attr("r")); 
 
     $(".small").each(function(){ 
 
     if(parseInt($(this).attr("cx"))<rangeX1&&parseInt($(this).attr("cx"))>rangeX2&&parseInt($(this).attr("cy"))<rangeY1&&parseInt($(this).attr("cy"))>rangeY2) 
 
      $(this).attr('fill','#fff'); 
 
     else 
 
      $(this).attr('fill','#000'); 
 
     }); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
    <svg width="1500" height="1500" id="svg"> 
 
     <circle class="circle" cx="0" cy='0' r='80' /> 
 
    </svg>

Answer 2

Bu, mesafeleri karşılaştırdığından, biraz daha doğrudur. Kabul edilen cevap çok fazla küçük daire kapar.

var s = Snap('svg') 
 
    for (var x = 10; x < 500; x = x + 30) { 
 
     for (var y = 10; y < 500; y = y + 30) { 
 
     var circle = s.circle(x, y, 5) 
 
     circle.attr({ 
 
      fill: 'black', //'#8BFE03' 
 
      class: 'small' 
 
     }) 
 
     } 
 
    } 
 
    s.mousemove(function(e) { 
 
     $('.circle').attr({ 
 
     cx: e.pageX, 
 
     cy: e.pageY 
 
     }); 
 
     
 
     var circle = $(".circle"); 
 
     $(".small").each(function(){ 
 
     var dx = $(this).attr("cx") - circle.attr('cx'); 
 
     var dy = $(this).attr("cy") - circle.attr('cy'); 
 
     if((dx*dx + dy*dy) <= circle.attr('r')*circle.attr('r')) 
 
      $(this).attr('fill','#fff'); 
 
     else 
 
      $(this).attr('fill','#000'); 
 
     }); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
<svg width="1500" height="1500" id="svg"> 
 
    <circle class="circle" cx="0" cy='0' r='80' /> 
 
</svg>