我的目标是拥有一个 div具有固定大小(通过 JavaScript动态设置),仅包含 svg元件.当这个 svg大于父 div滚动条应该出现.当它更小时,它的大小应该设置为父 div的大小. – 但不应出现滚动条. 这
这没有按预期工作,因为一些代码可以显示：
<?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>
这将创建一个几乎为空的页面,其中包含< div>固定大小为500x500px,并且< 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>表现不同？
以及如何在父级< div>中嵌入SVG当大小相同时没有出现滚动条(当大小变大时出现滚动条？)
注意：这是使用Firefox和Chromium测试的.
不同之处在于div是display：block;默认情况下,svg是display：inline;所以你遇到的问题是文本基线对齐不会发生在div中.如果添加到CSS,以下任一项都应删除滚动条：svg { display:block; }
要么;
svg { vertical-align: top; }