SVG不能精确缩放到宽度：某些尺寸的100％

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 =＆＃34; none＆＃34;。

禁用此功能

18.0
13.0
10.0
12.0 
8.0