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

【问题标题】：Why SVG in .svg file scales but when it's in .html file it won't?为什么 .svg 文件中的 SVG 会缩放，但在 .html 文件中却不会？
【发布时间】：2018-01-21 00:12:18
【问题描述】：

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

但是当相同的 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>

谁能告诉我这里缺少什么以使其响应浏览器窗口的高度和宽度？

【问题讨论】：

您需要在您的问题中发布您的标记，而不是任何第三方网站，这些网站可能会改变或死去，将来不会帮助任何人。 minimal reproducible example
@Rob 刚刚更新了我的问题。这些文件链接到我自己的 github 存储库只是为了显示行为。

标签： html css svg adobe-illustrator

【解决方案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>

【讨论】：