为什么 .svg 文件中的 SVG 可以缩放，但在 .html 文件中却不会？

Question

我已经从 Adobe Illustrator 生成了一个简单的 SVG file。当我在浏览器中打开此 .svg 文件并调整浏览器 window 大小时，它会响应高度和宽度 [所需行为]。

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

但是当相同的 SVG 内联时 HTML file 它只响应浏览器的宽度。

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

任何人都可以告诉我我在这里缺少什么以使其响应浏览器的高度和宽度window？

Answer 1

您只需将 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>

为什么 .svg 文件中的 SVG 可以缩放，但在 .html 文件中却不会？

Why SVG in .svg file scales but when it's in .html file it won't?

html

css

svg

adobe-illustrator