从 <svg> 元素中删除 'mystery' 水平线？

Question

我已将样式化的 svg 边框添加到 .它按预期呈现，除了 svg 元素底部边缘的水平线。

svg 来源是

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2600 131.1" preserveAspectRatio="none">
    <path class="edge" style="opacity:1.00" d="M 2600,130.1 H 0 V 61 Z" />
    <path class="edge" style="opacity:0.50" d="M 2600,130.1 H 0 V 61 h 2600 z" />
    <path class="edge" style="opacity:0.25" d="M 0,130.1 H 2600 V 0 L 0,61 Z" />
</svg>

你可以在这里看到错误的水平线

Codepen

（它在底部，蓝色...）。

我希望线路消失。

到目前为止，我无法用 (S)CSS 来改变它的样式。

我在 Inkscape 中打开了 svg 以查看该行是否在源代码中；至少在 Inkscape 中，那里什么都没有。

如何删除该行？ CSS？ SVG？其他？

Answer 1

我想我会把它作为一个答案而不是评论：

您有 viewBox="0 0 2600 131.1"，但您所有的路径都从 130.1 开始。所以这是你添加的像素。将其更改为 viewBox="0 0 2600 130.1"（或将路径更改为 131.1）

更清楚地说，是你的 .wrapper-element 的背景泄漏了（尝试更改背景颜色以证明），因为你的视图框比你的 svg-content 稍大，并且因为svg 在没有内容的地方是透明的。

从 <svg> 元素中删除 'mystery' 水平线？

Removing a 'mystery' horizontal line from an <svg> element?

html

css

svg

zurb-foundation