Question

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

有人能告诉我这里缺少什么让它对浏览器窗口的高度和宽度做出响应吗？

Answer 1

您只需要在html，body和svg元素上设置100％的显式高度和宽度，以便它们都填满显示。

＆＃13;

html, body, svg {
  height: 100%;
  width: 100%;
}

＆＃13;

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

＆＃13;

为什么.svg文件中的SVG会缩放但是当它在.html文件中时它不会？

1 个答案: