title: Why are there gaps between my SVG shapes?
body: <p>There are two circles for each of the four columns on the page. The inner circle is a mask for the viewable region of the spotlight when you rollover. The outer circle is a mask for the black overlay while we're still tracking the mouse.</p>
  
  <p>The problem is they don't line up flush, there is that tiny space between them and it's driving me nuts. Any ideas of how to get rid of that spacing? I've been playing rounding the float values so that all of the positioning and sizing values are integer, but I haven't found the right combo yet.</p>
  
  <p>Here is a link to the page: <a href="http://soundandtheshadow.com" rel="nofollow">enter link description here</a>
  I'm using a jQuery SVG plugin, but here is the code anyhow:</p>
  
  <pre><code>// Create an SVG for each .svg_mask
      $('.svg_mask').each(function (key) {
          $(this).css({
              'min-height' :cr*4.5,
              'min-width' : cr*4.5
          }).css({
              marginLeft: -$(this).width()/2,
              marginTop: -$(this).height()/2
          });
  
          $(this).svg();            
          var tw = $(this).outerWidth();
          var th = $(this).outerHeight();
  
      // circle mask
          var cm = Math.round(cr*3.14*1.25); // obsolete?
          var rx = tw/2-cm/2; // position from left rect edge
          var cx = tw/2; // position from left center 
          var cri = cr*1.2; //inner circle mask radius
          var cro = tw/2; // out circle mask radius
  
          var px = $(this).offset().left; // position for page
          var py = $(this).offset().top; // position for page
          this.pcx = px + cx; // relative pos center
          this.pcy = py + cx; // relative pos center
  
          $('svg', this).attr('viewBox', '0 0 '+tw+' '+th);
          var svg = $(this).svg('get');
          var defs = svg.defs();
          var filter = svg.filter(defs, 'blur'+key, 0, 0, tw, th, 
              {filterUnits: 'userSpaceOnUse'}); 
          svg.filters.gaussianBlur(filter, 'blur'+key, 
              'SourceAlpha', 10); 
  
      // Our spotlight &amp; rect
          var circle_mask = svg.mask(defs, 'circle_mask'+key, 0, 0, tw, th, 
              {maskUnits: 'userSpaceOnUse'});
  
          svg.circle(circle_mask, cx, cx, cro,
              {strokeWidth: 0, fill:'white', fillOpacity: 0.8, strokeWidth: 0});
  
          this.circle = svg.circle(circle_mask, 0, 0, cri,
              {strokeWidth: 0, fill: 'black', fillOpacity: 1, filter: 'url(#blur'+key+')'});
  
      // Draw this rect
          svg.circle(cx, cx, cro,
              {strokeWidth: 0, mask: 'url(#circle_mask'+key+')', opacity: 1.0});
  
      // mask this region off to background svg
          svg.circle(window.mask, this.pcx, this.pcy, cro, 
              {strokeWidth: 0, fill: 'black'});
      });
  </code></pre>
  
  <p>Any help is appreciated.</p>
  
  <h2>Update</h2>
  
  <p>I haven't found a solution to seamlessly mask off a circle and composite another circle to fit in the space, but the design has changed and I no longer NEED a solution for this particular project. It would be nice to understand how to achieve the effect though.
  The link now reflects the new design with a new problem...</p>