title: How to retrieve element's coordinates relative to an svg viewbox?
body: <p>In my index.html I have an svg viewbox:</p>
  
  <pre><code>&lt;svg viewBox = "0 0 2000 2000" version = "1.1"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I wish to animate an svg ellipse I have created such that when the ellipse is clicked it moves vertically to a certain y point we'll call TOP, and if clicked again moves back to its original position called BOTTOM. Currently I am using the following code which works to an extent.</p>
  
  <pre><code>var testFlag = 0;    
  d3.select("#ellipseTest").on("click", function(){
  if (testFlag == 0){
    d3.select(this)
        .attr("transform", "translate(0,0)")
        .transition()
          .duration(450)
          .ease("in-out")
          .attr("transform", "translate(0,-650)")
      testFlag = 1;
  }else{
   d3.select(this)
        .attr("transform", "translate(0,-650)")
        .transition()
          .duration(450)
          .ease("in-out")
          .attr("transform", "translate(0,0)")
  testFlag = 0;
  }
  });
  </code></pre>
  
  <p>The issue however, is that I have also made the ellipse drag-able up to the point TOP and down to the point BOTTOM. So if I drag the ellipse halfway in between TOP and BOTTOM, then click the ellipse, it animates vertically <em>above</em> TOP, instead of stopping when it reaches TOP (and like wise for BOTTOM when animating down). This seems to be a result of how the transform translate method works.
  I believe I can resolve this if I create a function that dynamically returns the amount the ellipse should translate relative to where the mouse clicks (or better yet, to where the ellipse is currently position) . The problem is that I can't figure out how to get the current y position of the element relative to the viewbox, rather I can only get the position with respect to the entire page.</p>
  
  <p>Here is the faulty code I am using to get the position of my click:</p>
  
  <pre><code>var svg2 = document.getElementsByTagName('svg')[0];
  var pt = svg2.createSVGPoint();
  document.documentElement.addEventListener('click',function(evt){    
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      console.log('Position is.... ' + pt.y);
  },false);
  </code></pre>
  
  <p>Here is my working code to make the ellipse draggable:</p>
  
  <pre><code>//These points are all relative to the viewbox
  var lx1 = -500;
  var ly1 = 1450;
  var lx2 = -500;
  var ly2 = 800;
  function restrict(mouse){ //Y position of the mouse 
      var x;
      if ( (mouse &lt; ly1) &amp;&amp; (mouse &gt; ly2) ) {
          x = mouse;
      }else if (mouse &gt; ly1){
          x = ly1;
      }else if (mouse &lt; ly2) {
          x = ly2;
      }
      return x;
  }
  
  
  var drag = d3.behavior.drag()
      .on("drag", function(d) {
        var mx = d3.mouse(this)[0];
        var my = d3.mouse(this)[1];
  
  
        d3.select("#ellipseTest")
          .attr({
            cx: lx2,
            cy: restrict(d3.mouse(this)[1])
          });
      })
  </code></pre>