爲什麼在DIV中使用SVG元素時會出現滾動條？

我的目標是擁有一個固定大小（通過JavaScript動態設置）的<div>，它只包含一個<svg>元素。當此<svg>比父<div>大時，應出現滾動條。當尺寸較小時，它的尺寸應該設置爲家長的尺寸<div> - 但不應出現滾動條。爲什麼在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 width="500" height="500">內。這個SVG具有滾動條 - 雖然它們不是必需的，因爲尺寸會非常合適。

，這將只是一個<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>內可以很容易地顯示 - 滾動條的出現和。

有人能夠啓發我，爲什麼<div>和<svg>行爲不同？

我怎麼能嵌入SVG父<div>內沒有出現滾動條時的大小是一樣的

注（與當尺寸變大出現的呢？）：這是與Firefox和鉻測試。

來源

2011-01-09 Chris

如果你像這樣包裝編輯器會怎樣？ `

` – 2011-01-09 16:50:06

不同的是，因爲div是display: block;默認而svg是display: inline;所以你打與不與div發生文本基線對齊的問題。如果將以下任一項添加到您的CSS，則應刪除滾動條：

svg { display:block; }

或;

svg { vertical-align: top; }

來源

2011-01-10 00:09:29 robertc

Thanks，`svg {display：block; }`對我來說是正確的解決方案！ – Chris 2011-01-11 20:37:42

爲什麼在DIV中使用SVG元素時會出現滾動條？

回答

相關問題