CODEWITHSUNDEEP
htmlcsssvg
Grégoire Stevenard
Grégoire Stevenard

Reputation: 3

Center (wide) SVG Element within (smaller) Container while keeping original SVG width

Issue:

Not able to center a wide svg (while retaining its original width and height) within a 'not-as-wide' container.

Steps:

I've design an SVG element that has a default width of 3000px which I want to preserve (I don't want it to scale or use width=100% to shrink or extend the SVG).

I want to place the SVG element within a container that has a width="100%" and a fixed height, let's say 250px. I'm trying to center the SVG, such as if my screen was only 1280px wide, the first portion (and last) 860px of the svg would not be visible.

*Calculation: (3000-1280)/2 = 860 *

Any idea or help on how to achieve this? I've tried using transform/translate to move the SVG inside the container but no positive results...

I'm getting hopeless :(

Code:

(edited to include original styled-components implementation)

import React from 'react'
import styled from 'styled-components'

// Using styled-components 
const Container = styled.div`
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 250px;
    text-align: center;
    margin: 0 auto;

    svg {
        opacity:1;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
    }

`;

class App extends React.Component {
render(){
return <Container>
    <svg xmlns="http://www.w3.org/2000/svg" width="3000" height="250" viewBox="0 0 3000 250">
        <path
            id="Path_19510"
            data-name="Path 19510"
            d="M3000,477s-200,5-356,115-336,106-423,65c-42.736-20.14-85.29-30.391-117.537-35.613-39.32-8.192-83.3-7.111-121.162,1.629-100.53,23.2-271.333,200.166-392.685,78.826-108.44-108.422-192.276-65.146-231.863-79.47-51.647-18.685-39.84-75.2-109.955-102.123-44.932-17.247-111.989,2.153-169.479,21.616l-.028.01h0c-31.022,10.5-59.25,21.016-79.711,25.8a266.054,266.054,0,0,1-47.2,4q-6.693-.333-13.233-1.2C886.09,560.723,855.088,493.629,802,474c-119-44-240,40-425,128C199.67,686.351,0,463,0,463V768l1168.438-.005L2140,768h860Z"
            transform="translate(0 -461.932)"
fill="#000"
        />
    </svg>
</Container>
}
}

Visual desired result:

Desired result to be achieved

Upvotes: 0

Views: 88

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

All you should need to do is add the following to the SVG.

<svg ... preserveAspectRatio="xMidYMid slice">
   ...etc...
</svg>

Upvotes: 1

Related Questions