如何使用 css 裁剪/居中 svg 图形？答案

【问题标题】：How to crop/center with css an svg graphic?如何使用 css 裁剪/居中 svg 图形？
【发布时间】：2021-11-24 21:31:42
【问题描述】：

我有一个 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>

【问题讨论】：

你能给我们看看svg，一些html和css吗？
我想它可以通过使用 viewBox 和 preserveAspectRatio="xMidYMid slice" 完全不用 css 来完成。如果这对您不起作用，请考虑编辑您的问题并遵循@Azu 的建议
@Azu 我添加了代码。

标签： css image svg crop

【解决方案1】：

我会将 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;      
    }
}

&lt;div class="svg-container"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

最简单的解决方案是将以下内容添加到您的 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>

【讨论】：