在调整大小时中心切片响应式 svg 图像

Question

我一直在尝试在调整大小时将响应式 Svg 图像居中切片。

我已经使用 preserveAspectRatio="xMidYMax slice" 来实现输出，但图像宽度不保留我的屏幕宽度。

body{
  margin:0;padding:0;
}

.wrapper {
 position: relative;
 width: 100%; 
 min-width: 100%;
 vertical-align: middle; 
 margin: 0;
}


.bg-svg {
 display: inline-block;
 position: absolute; 
 top: 0; left: 0; 
 width: 100%;
}

<div class="wrapper">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  d="0px" y="0px"
     width="1920px" height="1080px" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMax slice" class="bg-svg">
  <rect fill="#DACFB9" width="1920" height="1080"/>
  <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
  </svg> 
</div>

我正在尝试实现这样的输出Codepen demo，但我不想使用背景图片。

Answer 1

您试图达到并link使用的结果background-image。为了使其正确工作，请使用这个简化的svg。确保您有 viewBox、xmls 和至少 width 或 height 属性（仅设置为不带单位的整数）。然后 svg 将像任何其他背景图像一样处理。我不能在这里显示这个，因为我不能从 SO link，但这是修改后的 SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
    <rect fill="#DACFB9" width="1920" height="1080"/>
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
</svg>

我们可以这样模拟这个背景：

svg {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
    <rect fill="#DACFB9" width="1920" height="1080"/>
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
</svg>

如果将其保存为 SVG 文件，只需使用 background-image:

background-image: url(path/to/vector.svg) repeat 50% 50%;

Answer 2

您的主要问题是您的 SVG 需要：

width="100%" height="100%"

以便它填充包装纸。还有一些其他不必要的CSS。

body{
  margin:0;
  padding:0;
}

.wrapper {
  width: 100%; 
  height: 100vh;
}

<div class="wrapper">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
     viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" class="bg-svg">
  <rect fill="#DACFB9" width="1920" height="1080"/>
  <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
  </svg> 
</div>

在调整大小时中心切片响应式 svg 图像

Center slice a responsive svg image on resize

html

css

svg

responsiveness