我一直在尝试在调整大小时对响应的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演示这样的输出,但我不想使用背景图像。
您的主要问题是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>
您尝试实现并链接到的结果使用background-image
。为了使其正确工作,请使用此简化的svg
。请确保您具有viewBox
、xmls
以及至少一个width
或height
属性(仅设置为不带单位的整数)。然后svg
将像处理任何其他背景图像一样进行处理。我不能在这里显示这一点,因为我不能从SO链接,但这里有修改后的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%;