时间戳

首页 > 解决方案 > 如何缩放我的 .svg 以填充整个视口？

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

问题描述

我的目标是用 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>

标签： htmlcsssvg

解决方案

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

推荐阅读