Question

我的目标是让<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>才能轻松显示

<?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>表现不同？

当大小相同时（以及当大小变大时出现的滚动条），我如何在父<div>内嵌入SVG而不显示滚动条？

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

Answer 1

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

svg { display:block; }

或者

svg { vertical-align: top; }

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

1 个答案: