2014-06-05 77 views
1

我想用SVG图像填充文档,使用width =“100%”和height =“100%” 属性,我有height =“100%”在html和body标签中,以及body(red)和svg(blue)的不同颜色。SVG 100%文档高度不起作用

结果是一个完整的高度svg,但右侧有一个滚动条,底部有一条红色的细线(主体)。

¿如何在不使用滚动条的情况下使用svg填充文档?谢谢。

代码:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>SVG full page</title> 
    <style> 
     html, body { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     background-color: #ff0000; 
     } 
    </style> 
    </head> 
    <body> 
    <svg width="100%" height="100%"> 
     <rect x="0" y="0" width="100%" height="100%" fill="#0000ff"></rect> 
    </svg> 
    </body> 
</html> 

回答

6

display: block; CSS属性添加到SVG元素。

你可以在这里看到一个演示:http://jsfiddle.net/VL6z3/

+0

的工作,谢谢! – whizzo

+0

它的工作!但为什么,为什么我们必须这样做呢?什么使得svg标签的行为如此? –