Why are there gaps between my SVG shapes?

Question

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.

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.

Here is a link to the page: enter link description here I'm using a jQuery SVG plugin, but here is the code anyhow:

// 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 & 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'});
    });

Any help is appreciated.

Update

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...

Answer 1

This is likely due to the whitespace between the elements being rendered.

There is a discussion about this at How to remove the space between inline-block elements?

For a simple demonstration and solution see http://codepen.io/elliz/pen/dOOrxO ... code copied below:

.defs-only {
  display:block; position: absolute; 
  height:0; width:0; margin: 0; padding: 0; 
  border: none; overflow: hidden;
}

.margins svg {
  margin-right: -4px;
}

.floats {
  overflow: auto; /*clearfix*/  
}

.floats svg {
  float: left;
}

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
  <symbol id="square">
    <rect x="0" y="0" width="100" height="100" fill="currentColor" />
  </symbol>
</svg>


<h1>SVG gap issue demonstration</h1>
<p>This pen demonstrates the gap that can appear between inline svg elements</p>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: blue" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: red" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: green" /></svg>

<h2>Attempt 1: remove whitespace between elements</h2>
<p>On a hunch lets try to remove the space between the elements...</p>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: blue" /></svg><svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: red" /></svg><svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: green" /></svg><p>Ah ... so it is the same issue that used to plague &lt;li&gt; tags when you tried to create seamless horizontal menu items<p>
  
<h2>Attempt to remove whitespace using css</h2>

<h3>Using negative margins</h3>
<div class="margins">
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: blue" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: red" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: green" /></svg>
</div>

<p>Exact size of negative margin will depend on font size</p>

<h3>Using floats</h3>
<div class="floats">
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: blue" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: red" /></svg>
<svg width="36" height="36" viewBox="0 0 36 36"><use xlink:href="#square" style="color: green" /></svg>
</div>

<p>If you want to avoid a hairline gap between elements when viewed in retina, you may need to combine the two techniques above: e.g. floats with 1px negative margin.</p>

<h2>Further Reading</h2>
<ul>
  <li><a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">CSS Tricks article on space between li elements</a></li>
  <li><a href="https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements">Stack Overflow question discussing issue</a></li>
</ul>

Answer 2

Is it possible that your positioning code does not allow for a stroke width somewhere? Maybe on the circle? Specify stroke-width:0? Simplify what you are trying to do. Sometimes too much haste far less pace.

Answer 3

I think Chasbeen is correct. See the parameters to svg.circle (I got this from jquery svg docs):

svg.circle(70, 220, 50, {fill: "red", stroke: "blue", strokeWidth: 5}); 

In your circles, set the strokeWidth to 0.

EDIT: After reviewing your code I can't find any reason for that gap. Here's the best cheat I could come up with (it's definitely not perfect).

// mask this region off to background svg
    svg.circle(window.mask, this.pcx, this.pcy, cro, 
       {stroke: '#E3E3E3', strokeWidth: 2, fill: 'black'});
});