我有一個 svg 圖形，我希望它是全寬和全高，但是在縱向時，我只希望它的中心保持可見并裁剪左右。我想用 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>uj5u.com熱心網友回復：
最簡單的解決方案是將以下內容添加到您的 SVG 中。
preserveAspectRatio="xMidYMid slice"
然后確保您的頁面body、<div>和<svg>都是整頁高度。
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>uj5u.com熱心網友回復：
我會將 svg 代碼保存為單獨的 svg 檔案。在我的示例中，它保存為yellow.svg. 然后我用它作為svg-container. 您應該自己做，以便能夠將 svg 用作背景的本地檔案。然后嘗試以下代碼：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312340.html