Question

使用内联SVG时，我遇到了一个奇怪的问题。我正在<svg>元素中创建一个路径，并使用top或bottom CSS属性和relative定位将此SVG叠加到前一个元素上，以获得一个很酷的“剪切”对该部分的影响。

这完全适用于Chrome，但在 IE10 和 FF25 中，我在SVG的右侧和顶部都有这个“透明”边框。我把'透明'放在引号中，因为据我所知它是透明的，因为它显示在它下面的明亮的绿色背景。这是一个屏幕截图，指向我看到的确切位置（截图来自FF25）：

SVG Border Issue in Firefox 25

我最初从Codrops获得了分隔符建议。

Test Page

在此测试页面中，标题为“ SVG故障部分”的部分是有问题的部分。

有没有办法解决这个问题所以我的技术可以很好地跨浏览器？或者有更好的方法来达到我想要的效果吗？谢谢！

更新1： 通过更多测试，我发现有时在Firefox中滚动时，顶部幻像“边框”消失并且不会返回。甚至在重新加载页面之后。我不确定是什么导致它消失，它不是问题的一部分，只是一个异常现象。

更新2： 我已经做了一些额外的测试，通过删除元素来查看可能触发的内容以及删除注释后，“SVG故障部分”上方的几个部分和页脚，边框现在已移至底部分隔符。这是没有页脚的页面：http://ignitepixels.com/sandbox/svg/sample.html

更新3： 我创造了一个小提琴，我在其中复制了这个问题。这样可以更轻松地进行问题排查：http://jsfiddle.net/fmpeyton/NuneR/

由于你无法在jsfiddle中保存特定的面板大小，我附上了一个大概的大小截图，我可以用Firefox 25重现这个问题： Fiddle in Firefox 25 可能与Update 1相关，问题也会根据窗口宽度显示/消失。

Answer 1

我不确定这是一个舍入错误还是svg抗锯齿绘画问题，但我在测试中只发现以下内容在Firefox和IE10上一致地工作（{{3} }）：

将两个SVG路径更改为

请注意在两个地方添加的额外.1

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

更改这些元素的top / bottom偏移量

将偏移量从-20px更改为-19.5px

将此添加到.separator

    height: 20px;
    overflow: hidden;

我不确定的是这个解决方案可能有多么脆弱。

Answer 2

另一种解决方法是将以下规则添加到section.green。

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;

Answer 3

我在svg图形上遇到了类似的问题，我在其上使用了tween-maxjs。只有在铬合金我才有一个闪烁的边框。我尝试了上面推荐的解决方案，但它没有改变任何东西。

关键是： -webkit-backface-visibility：hidden;

我希望这能帮助有人解决同样的问题。干杯：）