如何缩放我的 .svg 以填充整个视口？答案

【问题标题】：How to scale my .svg to fill the entire viewport?如何缩放我的 .svg 以填充整个视口？
【发布时间】：2018-11-13 01:47:05
【问题描述】：

我的目标是用 svg 图像中定义的边框来框住整个页面。我认为我的css 应该可以解决问题，但边框无法缩放到浏览器窗口。我的 .css 文件应该是什么样的？我应该修改svgviewbox吗？

我的代码：

html {
  background: url(img/border.svg) no-repeat fixed;
  background-size: cover;
  background-size: 100% 100%;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>
</body>

</html>

【问题讨论】：

How to scale SVG image to fill browser window?的可能重复
我试过了，还是不行。

标签： html css svg

【解决方案1】：

您的 viewbox 是 300 x 300 将其更改为 1920 x 1080（您的 svg 大小）然后应该这样做并使其响应。

检查此代码：

body {
  margin: 0;
  padding: 0;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg preserveAspectRatio="none" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#D9D9D9;}
</style>
<path class="st0" d="M0-0.7h1920v1081.5H0V-0.7 M23,17.2v956.2c0,12.8,10.2,23,25.6,23H1897l2.6-953.6c0-15.3-10.2-25.6-28.1-25.6
	L23,17.2z"/>
</svg>
</body>

</html>

【讨论】：

[ ibb.co/c9dMDJ ] 不幸的是，它不起作用。顺便说一句：它也必须在 4:3 显示器上工作。我不希望保留纵横比。图片可以拉伸！
你的帖子里没这么说！！为什么要投反对票？至少说出原因，而不是仅仅对答案投反对票。在这里我更新了我的答案@MarvinNoll

【解决方案2】：

您应该将视图框尺寸更改为非常小以响应屏幕。

把它改成viewBox="0 0 1920 1080" 然后应用css

【讨论】：

【解决方案3】：

你有几个地方错了：

您的 SVG 缺少结束 </svg> 标记。
您的viewBox 值错误。它们比您的实际 SVG 内容大。它应该类似于：viewBox="0 0 199 112"
要使 SVG 忽略其纵横比并拉伸到父容器，您需要添加 preserveAspectRatio="none"。

svg {
  /* Example dimensions to show that svg stretches correctly */
  width: 400px;
  height: 400px;
  background-color: linen;
  border: solid 1px blue;
}

<svg  viewBox="0 0 199 112" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>

【讨论】：