在svg中查找圆圈内的元素答案

【问题标题】：Find elements inside circle in svg在svg中查找圆圈内的元素
【发布时间】：2015-07-20 21:44:28
【问题描述】：

我正在尝试查找位于circle 坐标之间的元素。在Fiddle 中，我有一个根据鼠标位置设置动画的圆圈，我想设置/选择大圆圈区域内的所有小圆圈

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>

【问题讨论】：

标签： jquery html css svg

【解决方案1】：

我已经检查了小坐标是否在大坐标中，如果是的话我已经改变了它的颜色

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>

【讨论】：

【解决方案2】：

因为比较距离，所以这更准确一些。接受的答案占据了太多的小圈子。

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>

【讨论】：