title: Creating SVG path in Grid points
body: <p>I need to create a SVG path along the green (Allowed) points to the closest point on mousedown event.</p>
  <p><strong><a href="http://jsfiddle.net/wu5h6d74/" rel="nofollow noreferrer">here is the jsfiddle</a></strong></p>
  <p><strong>The code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var GridArea = $('#Grid');
  var MapPoints;
  var PointsY = 140;                
  for (i = 160 ; i &lt;= 560; i+=20) {
    if (i == 560) {
      PointsY+=20;
      i = 160;
    }
    if (PointsY &gt;= 440){
      break;
    }
    MapPoints += ('&lt;rect class="MapPoints NotAllowed" x="'+i+'" y="'+PointsY+'"/&gt;');
  }
  GridArea.html(MapPoints + '&lt;circle id="CirclePoint" cx="160" cy="280" r="5" fill="red"/&gt;');
  var RectGrid = $("rect");
  var XValue, YValue;
  var X = [160,180,200,220,240,240,240,240,260,260,260,280,300,300,320,340,360,380,400,400,380,380,380,380,380,400,420,420,420,440,440,460,480,480,500,500,520,540,420,440,460,480,500,500,520,540];
  var Y = [280,300,320,320,320,340,360,380,400,320,300,300,300,280,280,280,280,280,300,280,260,240,220,200,180,160,140,320,340,340,360,380,380,400,400,420,440,440,300,300,300,300,300,280,280,260];
  for (i = 0; i &lt; RectGrid.length; i++) {
    for (j = 0; j &lt; X.length; j++) {
      if ($("rect:nth-child("+i+")").attr('x') == X[j] &amp;&amp; $("rect:nth-child("+i+")").attr('y') == Y[j]) {
        $("rect:nth-child("+i+")").removeClass("NotAllowed");
        $("rect:nth-child("+i+")").addClass("Allowed");
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  #Grid {
    width: 1000px;
    height: 600px;
    border: 1px solid black;
  }
  .MapPoints {
    width: 20px;
    height: 20px;
    z-index: 0;
    stroke: #000;
  }
  .NotAllowed {
    fill: rgba(255, 0, 0, 0.40);
  }
  .Allowed {
    fill: rgba(0, 255, 130, 0.40);
  }
  .CirclePoint {
    z-index: 1000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"&gt;&lt;/script&gt;
  &lt;svg id="Grid"&gt;
  
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I need the path either crossing or going inside the &quot;Allowed&quot; points.
  I tried to get the closest point and its worked for &quot;X&quot; but not for &quot;Y&quot;, and I couldn't even draw that wrong path.</p>