[FIXED] How to crop/center with css an svg graphic?

Issue

I have an svg graphic that I want it to be full-width and full height, but when in portrait-orientation I want only the center of it to remain visible and crop the left and right. And I want to do it with CSS.

<style type="text/css">
    .svg-container {
        width: 100%;
        /*height: 100vh;*/
    }

    .svg-container svg {

    }
</style>

<div class="svg-container">
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 450.1" enable-background="new 0 0 800 450.1" xml:space="preserve">
    <g id="XMLID_117_">
        <polyline id="XMLID_17_" fill="#FFFF00" points="800,449.7 0.4,449.7 0.4,0 800,0     "/>
        
            <line id="XMLID_1009_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="270.1" y1="385.2" x2="800" y2="385.2"/>
        <g id="XMLID_1004_">
            
                <line id="XMLID_1006_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="672.1" y1="272.3" x2="672.1" y2="449.7"/>
            
                <line id="XMLID_1005_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="471.1" y1="272.3" x2="471.1" y2="449.7"/>
        </g>
        
            <line id="XMLID_1026_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0.4" y1="64.4" x2="530.3" y2="64.4"/>
        
            <line id="XMLID_1024_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="329.3" y1="0" x2="329.3" y2="177.3"/>
        
            <line id="XMLID_1023_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="128.4" y1="0" x2="128.4" y2="177.3"/>
        
            <path id="XMLID_4_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M799,272H325c-30.7,0-56,24.9-56,55.6V450"/>
        
            <path id="XMLID_3_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M0,178h475.5c30.7,0,55.5-25.4,55.5-56.1V0"/>
    </g>
    </svg>
</div>

Solution

I would save the svg code as a separate svg file. In my sample it's saved as yellow.svg. Then I use it as a background of svg-container. You should do it yourself in order to be able to use the svg as a local file for the background. Then try the following code:

body {
    margin: 0;
    padding: 0;
    text-align:center;
}

 @media screen and (orientation: landscape) {
     .svg-container {
        position:absolute;
        let: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:url(yellow.svg) center center no-repeat;
        background-size: cover;       
    }
}
@media screen and (orientation: portrait) {
    .svg-container {
        height: 200px;
        width: 80%;
        background:url(yellow.svg) center center no-repeat;
        margin: 0 auto;      
    }
}

<div class="svg-container"></div>

Answered By - Azu

Answer Checked By - Mary Flores (PHPFixing Volunteer)