html - SVG 不完全缩放到宽度 :100% on certain sizes

Question

我正在使用 svg 路缘覆盖一个部分，并在该部分上呈现曲线的外观。

它工作正常，除了某些宽度，svg 没有完全使用整个宽度，所以我可以在左侧和右侧看到下面部分的一条小线。

这是它的样子:

真正奇怪的是我在大多数尺寸上都没有遇到这个问题......

SVG代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 44.26" class="courbe-blanche">
  <g data-name="Calque 1">
    <path fill="#fff" d="M612 15.25C570 29.2 504.47 43.5 385.2 41.4 278 39.55 113.1 25 0 3.45v40.82h612z"/>
    <path fill="#d1eaf4" d="M612 15.25C570 29.2 504.47 43.5 385.2 41.4 278 39.55 113.1 25 0 3.45V0s192.74 31.35 394.64 31.35C536.2 31.35 612 1.28 612 1.28z"/>
  </g>
</svg>

HTML

<div id="footer-container" class="blue degrade courbe-up">
    <!-- content -->
</div>

CSS 代码:

.courbe-up {
    position: relative;
    &:before {
        content: url(../images/courbe-blanche.svg);
        width: 100%;
        position: absolute;
        top: -10px;
        transform: rotate(180deg);
        bottom: auto;
    }
 }

Answer 1

当您有一个 viewBox 时，内容将(默认情况下)尝试保持 viewBox 的纵横比。您可以通过 preserveAspectRatio="none"禁用它。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 44.26"  preserveAspectRatio="none" class="courbe-blanche">
  <g data-name="Calque 1">
    <path fill="#fff" d="M612 15.25C570 29.2 504.47 43.5 385.2 41.4 278 39.55 113.1 25 0 3.45v40.82h612z"/>
    <path fill="#d1eaf4" d="M612 15.25C570 29.2 504.47 43.5 385.2 41.4 278 39.55 113.1 25 0 3.45V0s192.74 31.35 394.64 31.35C536.2 31.35 612 1.28 612 1.28z"/>
  </g>
</svg>