8

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

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

Firefox 25 中的 SVG 边框问题

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

测试页

在这个测试页面中，标题为“ SVG Trouble Section ”的部分是有问题的部分。

有没有办法缓解这个问题，所以我的技术可以跨浏览器正常工作？或者有没有更好的方法来达到我想要的效果？谢谢！

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

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

更新 3： 我创建了一个小提琴，在其中复制了这个问题。这应该使故障排除更容易：http: //jsfiddle.net/fmpeyton/NuneR/

由于您无法在 jsfiddle 中保存特定的面板尺寸，因此我附上了我能够使用 Firefox 25 重现此问题的大致尺寸的屏幕截图： Firefox 25 中的小提琴 可能与更新 1 相关，问题根据窗口宽度显示/消失为出色地。

4

3 回答 3

5

我不确定这是舍入错误还是svg抗锯齿绘制问题，但在我的测试中，我只发现以下内容在 Firefox 和 IE10 上始终如一地工作（参见示例）：

将两个 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;

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

于 2013-11-13T20:56:42.477 回答
2

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

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
于 2013-11-09T03:39:37.703 回答
2

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

所以我找到了这篇文章：防止在 webkit-transform 的 webkit-transition 上闪烁

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

我希望这会帮助那些在同样问题上苦苦挣扎的人。干杯:)

于 2017-12-18T09:35:40.653 回答