title: Coordinates of foreignObject HTML elements in SVG space
body: <p>I have an SVG file with an XHTML table. I want to connect portions of the table with SVG drawing (via JavaScript). For example, in the following file I want to place each of the yellow circles centered on the right ends of the red borders:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0"?&gt;
  &lt;svg viewBox="0 0 1000 650" version="1.1" baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;title&gt;Connect&lt;/title&gt;
    &lt;style type="text/css"&gt;&lt;![CDATA[
      table { border-collapse:collapse; margin:0 auto; }
      table td { padding:0; border-bottom:1px solid #c00;}
      circle.dot { fill:blue }
    ]]&gt;&lt;/style&gt;
    &lt;foreignObject x="100" width="800" height="600" y="400"&gt;&lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;
      &lt;th&gt;Space&lt;/th&gt;
    &lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input name="name" type="text" value="One"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input name="name" type="text" value="Two"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/foreignObject&gt;
    &lt;circle class="dot" id="dot1" cx="100" cy="100" r="5" /&gt;
    &lt;circle class="dot" id="dot2" cx="200" cy="100" r="5" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>How can I best find the location of an arbitrary HTML element in global SVG coordinate space?</p>
  
  <p><em>For simplicity, feel free to ignore browser resizing, and any transformation stacks that may wrap the <code>&lt;foreignObject&gt;</code>.</em></p>