Question

页面上的四列各有两个圆圈。翻转时，内圈是聚光灯可视区域的遮罩。外圆是黑色覆盖的遮罩，而我们仍在跟踪鼠标。

问题是他们没有排队齐声，他们之间有一个很小的空间，这让我疯狂。有关如何摆脱间距的任何想法？我一直在玩浮点数值，以便所有的定位和大小调整值都是整数，但我还没找到合适的组合。

以下是该页面的链接：enter link description here 我正在使用jQuery SVG插件，但无论如何这里是代码：

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

感谢任何帮助。

更新

我还没有找到一个解决方案来无缝地遮挡一个圆圈并复合另一个圆圈以适应空间，但设计已经改变，我不再需要这个特定项目的解决方案。理解如何实现这种效果会很好。该链接现在反映了新设计的新问题...

Answer 1

您的定位代码是否可能不允许某处的笔划宽度？也许在圈子上？指定笔画宽度：0？简化您要做的事情。有时太多的速度远没有那么快。

Answer 2

我认为Chasbeen是正确的。请参阅svg.circle的参数（我是从jquery svg docs获得的）：

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

在您的圈子中，将strokeWidth设置为0。

编辑：在审核您的代码后，我找不到任何原因造成这种差距。这是我能想到的最好的作弊（绝对不是完美的）。

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

Answer 3

这可能是由于要渲染的元素之间的空白。

在How to remove the space between inline-block elements?

进行了讨论

有关简单的演示和解决方案，请参阅下面复制的http://codepen.io/elliz/pen/dOOrxO ...代码：

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

为什么我的SVG形状之间存在差距？

更新

3 个答案: