Question

我有一个宽度和高度设置为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>

注意::内联结果片段可能不正确请参阅Plunker

Plunker Without DocType
Plunker With DocType

Answer 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 height属性只有一个不同的默认值。这两种情况“工作”只要你理解，这只是你想要的一种情况。

您可能还想要显示svg元素：block eg。

  svg {
    display: block;
  }

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

1 个答案: