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

Question

我已经为 .它按预期呈现，除了 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 的背景泄漏了(尝试更改背景颜色以证明)，因为你的 View 框比你的 svg-content 稍大，因为 svg 是没有内容的地方是透明的。