在DIV中使用SVG元素时，为什么会出现滚动条? [英] Why do scrollbars appear when using a SVG element inside a DIV?
问题描述
我的目标是拥有一个固定大小的<div>(通过JavaScript动态设置)，该大小仅包含<svg>元素.当此<svg>大于父<div>滚动条时.较小时，应将其大小设置为父<div>的大小-但不应出现滚动条.
My aim is to have a <div> with a fixed size (dynamically set through JavaScript) that is only containing an <svg> element. When this <svg> is bigger than the parent <div> scrollbars should appear. When it's smaller, it's size should be set to those of the parent <div> - but no scrollbars should appear.
这无法正常工作，因为一些代码可以显示:
This isn't working as expected as a little bit of code can show:
<?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具有滚动条-尽管不需要滚动条，因为它的大小非常合适.
This will create a nearly empty page, that contains a <div> with the fixed size of 500x500px - and a <svg width="500" height="500"> inside. This SVG has scrollbars - although they are not needed as the size would be a perfect fit.
将演示修改为
<?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>内-并且出现了滚动条.
So now a <div> is inside of the parent <div> of exactly the same size - and the scrollbars are appearing.
有人可以启发我，为什么<div>和<svg>的行为不同?
Can someone enlighten me, why the <div> and the <svg> are behaving differently?
当尺寸相同时，如何在不显示滚动条的情况下将SVG嵌入到父级<div>中?(当尺寸变大时，又出现滚动条?)
And how I can embed an SVG inside the parent <div> without appearing scrollbars when the size is the same (and with appearing ones when the size gets bigger?)
注意:这已在Firefox和Chromium上进行了测试.
Note: This is tested with Firefox and Chromium.
推荐答案
差异是因为默认情况下div是display: block;而svg是display: inline;，所以您遇到了文本基线对齐问题div不会发生这种情况.如果添加到CSS中，以下任何一项都应删除滚动条:
The difference is because div is display: block; by default whereas svg is display: inline; so you're hitting an issue with the text baseline alignment that doesn't happen with the div. Either of the following should remove the scrollbars if added to your CSS:
svg { display:block; }
或者;
svg { vertical-align: top; }
这篇关于在DIV中使用SVG元素时，为什么会出现滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
