Question

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

我的代码：

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>

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

Answer 2

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

使其像viewBox="0 0 1920 1080"，然后应用css

Answer 3

你有几个错误：

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何缩放我的.svg来填充整个视口？

3 个答案: