在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屋!