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>CodePudding user response：
The simplest solution is to add the following to your SVG.
preserveAspectRatio="xMidYMid slice"
Then make sure your page body, <div>, and <svg> are all full page height.
body {
height: 100vh;
}
.svg-container,
.svg-container svg {
width: 100%;
height: 100vh;
}<div class="svg-container">
<svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice">
<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>CodePudding user response：
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>