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

时间:2015-09-08 15:35:42

标签: html5 svg

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

1 个答案:

答案 0 :(得分:4)

如果设置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;
  }