CODEWITHSUNDEEP
htmlcsssvg
Marine Le Borgne
Marine Le Borgne

Reputation: 1056

SVG not exactly scaling to width:100% on certain sizes

I'm using an svg curb to cover a section and give the appearance of an curve on the section.

It works fine, except for certain width where the svg doesn't exactly use the whole width so I can see a small line of the section below on the left and right side.

Here's how it looks like : the svg is the while and light blue colors. The section is the gradient.

What's really weird is that I don't get this problem on most sizes...

SVG code

<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 code : 

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

Upvotes: 0

Views: 37

Answers (1)

Robert Longson
Robert Longson

Reputation: 124016

When you have a viewBox the content will (by default) try to maintain the aspect ratio of the viewBox. You can disable this via 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>

Upvotes: 1

Related Questions