如何 crop/center 和 css svg 图形？

Question

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

Answer 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;      
    }
}

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

Answer 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>

如何 crop/center 和 css svg 图形？

How to crop/center with css an svg graphic?

css

svg

image

crop