3
私の目的は<svg>要素しか含まない固定サイズ（JavaScriptで動的に設定）を<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>
に変更されたとき<svg>を簡単に示すことが可能で、これはのみ発生しますので、今<div>がまったく同じ大きさの親<div>の内側にあることを
。
誰かが私に啓発できますか？<div>と<svg>の動作が異なるのはなぜですか？
そして、どのように私はサイズが同じであるとき、スクロールバーを表示せず、親<div>内のSVGを埋め込むことができ
ノート（とサイズが大きくなったときのものを表示されると？）：これは、Firefoxとクロムでテストされています。 svgはそうあなたがdivと起こらないテキストのベースラインの配置の問題をヒットしているdisplay: inline;であるのに対し、divはデフォルトでdisplay: block;あるので
このようにエディタをラップするとどうなりますか？ '