我的目标是拥有一个<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>
将demo修改为即可轻松展示
<?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 和 Chromium 进行测试的。