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

Question

我的目标是拥有一个固定大小（通过 JavaScript 动态设置）的 <div>，它只包含一个 <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 的 <div> - 和一个 <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> 的行为不同？

以及如何在大小相同时将 SVG 嵌入父级 <div> 而不出现滚动条（以及在大小变大时出现滚动条？）

注意：这是使用 Firefox 和 Chromium 测试的。

Answer 1

不同之处在于div 默认为display: block; 而svg 为display: inline;，因此您遇到了div 不会发生的文本基线对齐问题。如果添加到您的 CSS 中，以下任何一项都应该删除滚动条：

svg { display:block; }

或者;

svg { vertical-align: top; }