我从Adobe Illustrator生成了一个简单的SVG file。当我在浏览器中打开此.svg文件并调整浏览器窗口的大小时，它会同时响应高度和宽度[所需的行为]。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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 1400 778" enable-background="new 0 0 1400 778" xml:space="preserve">
----SVG CODE---
</svg>
但是，当在HTML file内联相同的SVG时，它仅对浏览器的宽度作出响应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Overview</title>
<style>
</style>
</head>
<body>
<svg 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 1400 778" enable-background="new 0 0 1400 778" xml:space="preserve">
----SVG CODE---
</svg>
</body>
</html>
谁能告诉我我在这里所缺少的内容，以使其能够响应浏览器窗口的高度和宽度？
最佳答案
您只需要在html，body和svg元素上设置100％的显式高度和宽度，以使它们全部填充显示。
html, body, svg {
height: 100%;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Overview</title>
<style>
</style>
</head>
<body>
<svg viewBox="0 0 1400 778" xml:space="preserve">
<rect width="1400" height="778" fill="red"/>
</svg>
</body>
</html>