DIV에서 SVG 요소를 사용할 때 스크롤 막대가 나타나는 이유는 무엇입니까?

내 목표는 <svg> 요소 만 포함하는 고정 크기 (자바 스크립트를 통해 동적으로 설정)로 <div>을 사용하는 것입니다. 이 <svg>이 부모 인 <div>보다 큰 경우 스크롤 막대가 나타납니다. 크기가 작 으면 크기는 부모 <div>의 크기로 설정해야하지만 스크롤 막대는 나타나지 않아야합니다. 및 내부 <svg width="500" height="500"> -DIV에서 SVG 요소를 사용할 때 스크롤 막대가 나타나는 이유는 무엇입니까?

가

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <script type="text/javascript" src="lib/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script> 
    <script type="text/javascript" src="lib/jquery.svg.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#editor').svg(); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="editor" style="width:500px;height:500px;overflow:auto"></div> 
    </body> 
</html>

이 500x500px의 고정 된 크기의 <div>을 포함하는 거의 빈 페이지를 만듭니다 :

이

코드의 조금 보여줄 수있는 예상대로 작동하지 않습니다 . 이 SVG에는 스크롤바가 있습니다. 크기가 완벽하게 적합하기 때문에 필요하지 않습니다.

이것은 단지 데모 그래서

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <script type="text/javascript" src="lib/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script> 
    <script type="text/javascript" src="lib/jquery.svg.js"></script> 
    </head> 
    <body>  
    <div style="width:500px;height:500px;overflow:auto"><div style="width:500px;height:500px"></div></div> 
    </body> 
</html>

지금 <div> 정확히 같은 크기의 부모 <div>의 내부에 수정 될 때 쉽게 표시 할 수있는 <svg> 일어날 것이다 - 그리고 스크롤바가 나타나고있다 .

나를 계몽 할 수 있습니까? <div>과 <svg>이 다르게 행동하는 이유는 무엇입니까?

내가 크기가 동일한 경우 스크롤 막대를 표시하지 않고 부모 <div> 내부에 SVG를 포함 할 수있는 방법

주 (그리고 크기가 더 큰 얻을 때 사람을 등장과 함께?) : 이것은 파이어 폭스와 크롬에서 테스트됩니다. svg 그래서 당신이 div으로 발생하지 않습니다 텍스트 기준선 정렬에 문제를 타격하고 display: inline; 반면 div 기본적으로 display: block; 때문에

출처

2011-01-09 Chris

편집기를 이와 같이 포장하면 어떻습니까? '

' –

의 차이입니다. CSS에 스크롤바를 추가하면 다음 중 하나가 스크롤 막대를 제거해야합니다.

svg { display:block; }

또는;

svg { vertical-align: top; }

출처

2011-01-10 00:09:29 robertc

감사합니다.'svg {display : block; }'내 경우에는 올바른 해결책이다! – Chris

+1 미친 스킬! 감사! :-) –

예! 이것은 나를위한 그런 두통이었다 – Chet

DIV에서 SVG 요소를 사용할 때 스크롤 막대가 나타나는 이유는 무엇입니까?

답변

관련 문제