2014-06-05 4 views
1

height = "100 %"width = "100 %"및 height = "100 %" 속성을 사용하여 SVG 이미지로 문서를 채우려고합니다. 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

는 SVG 요소에 display: block; CSS 속성을 추가합니다.

여기 데모를 볼 수 있습니다 http://jsfiddle.net/VL6z3/

+0

근무, 감사합니다! – whizzo

+0

작동 중! 그러나 왜 우리가 이것을해야합니까? 무엇 svg 태그가 이런 식으로 행동하게합니까 ???? –

관련 문제