SVG - 百分比高度和宽度在 HTML5 中不起作用答案

【问题标题】：SVG - percentage height and width does not work in HTML5SVG - 百分比高度和宽度在 HTML5 中不起作用
【发布时间】：2015-12-04 09:02:46
【问题描述】：

我有一个宽度和高度设置为 100% 的 SVG，并且属性“preserveAspectRatio”设置为“xMidYMid meet”。

使用谷歌浏览器，在添加标签（使其成为 HTML5）后，行为会发生变化。 SVG元素不会占据页面的全部空间，SVG的高度与宽度自动成比例设置。

没有 DOCTYPE 的 HTML - 按预期工作

<html>
  <head>
    <style>
      body{
        padding:0;
        margin:0;
      }
    </style>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg" 
           version="1.1"
           style="width:100%;height:100%;background-color:#0f0"
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 100 150">
        <rect 
            x="11" 
            y="11" 
            width="80" 
            height="130"
            style="stroke: #000000; fill:none;"/>
      </svg>
  </body>
</html>

带有 DOCTYPE 的 HTML - 不工作

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body{
        padding:0;
        margin:0;
      }
    </style>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg" 
           version="1.1"
           style="width:100%;height:100%;background-color:#f00"
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 100 150">
        <rect 
            x="11" 
            y="11" 
            width="80" 
            height="130"
            style="stroke: #000000; fill:none;"/>
      </svg>
  </body>
</html>

注意 :: 内联结果 sn-ps 可能不正确参考 Plunker

Plunker Without DocType
Plunker With DocType

【问题讨论】：

标签： html svg

【解决方案1】：

如果您设置 html 和 body 元素的宽度和高度，无论是否存在 html DOCTYPE，您都可以获得任一结果

  body, html {
    padding:0;
    margin:0;
    height: auto;
    width: 100%;
  }

或

  body, html {
    padding:0;
    margin:0;
    height: 100%;
    width: 100%;
  }

旧版渲染只是对默认 html 高度属性具有不同的默认值。如果您了解这一点，这两种情况都“有效”，这只是您想要的情况。

您可能还想让 svg 元素显示：例如块

  svg {
    display: block;
  }

【讨论】：

向 html 添加 100% 的宽度和高度解决了 SVG 高度的问题，但是现在页面有垂直滚动并且 html 标记获得了自己的高度，检查 - embed.plnkr.co/zpOTDomAwSobEYseaHSH/preview 这只发生在 SVG 的情况下而不是与其他标签，如 DIV
使<svg> 元素显示：块。 <div> 默认被屏蔽。