CODEWITHSUNDEEP
svg
HKS
HKS

Reputation: 1003

Centering and removing white space from a SVG in an enclosing div

I am facing difficulty in stretching a SVG in the X-axis, so that there is no white space visible on either side. Also, I want the point (marked in red circle in the attached picture) to touch the starting of the second div with background color of black. I have tried changing the viewbox values, but I am not able to achieve the desired result.

The below is my code.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}
<div class="example">
    <svg viewbox="0 0 3000 1750">
        <path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>    
    </svg>
</div>

<div class="section-two">

</div>

enter image description here

Upvotes: 2

Views: 1767

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

For that to happen, you need to do two things:

  1. Make sure that your viewBox is correct. It needs to match the dimensions of your <path>. It currently doesn't.

  2. Add the following attribute to your SVG to turn off the automatic aspect-ratio-preserving scaling that SVG does.

    preserveAspectRatio="none"

If we check the bounding box of your path, we get the values:

x: 2.600
y: 2.895
width: 2984.740
height: 1650.893

So that is what your viewBox needs to be set to, if you want the path to touch all four sides of the SVG's parent container.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}
<div class="example">
    <svg viewbox="2.6 2.9 2984.7 1650.9" preserveAspectRatio="none">
        <path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>
    </svg>
</div>

<div class="section-two">

</div>

Upvotes: 3

Related Questions