为什么在 DIV 中使用 SVG 元素时会出现滚动条？

Question

为什么在 DIV 中使用 SVG 元素时会出现滚动条？

3

我想要一个固定大小的 <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>

这将创建一个几乎为空的页面，其中包含一个固定大小为500x500px的

- 和一个内部的

当演示被修改为只有

<?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嵌入到父级

中，在大小相同时不出现滚动条（并且在大小变大时出现滚动条）？

注意：这是在Firefox和Chromium中进行测试的。

- Chris

如果您将编辑器包装如下，会怎么样？ <div style="width:500px;height:500px;overflow:auto"><div id="editor"></div></div> - Shadow The Spring Wizard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertc · Accepted Answer

之所以有差别是因为 div 的默认显示值为 display: block; 而 svg 的默认显示值为 display: inline;，所以您遇到了文本基线对齐的问题，在 div 中不会出现该问题。如果添加以下任一样式到您的CSS中，均可去除滚动条：

svg { display:block; }

或者；

svg { vertical-align: top; }