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

发布于 2024-10-11 00:03:28 字数 2536 浏览 0 评论 0原文

我的目标是拥有一个固定大小（通过 JavaScript 动态设置）的

，仅包含元素。当此大于父

时，应该出现滚动条。当它较小时，它的大小应设置为父

的大小 - 但不应出现滚动条。

这并没有按预期工作，正如一点点代码可以显示的那样：

<?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 的

- 和一个内。该 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>

所以现在

位于父 内部时，这种情况只会发生在上”

的大小完全相同 - 并且出现滚动条。

有人可以启发我，为什么

和的行为不同？

以及如何在大小相同时将 SVG 嵌入到父

中而不出现滚动条（并且当大小变大时出现滚动条？）

注意：这是使用 Firefox 进行测试的，并且铬。

原文

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>

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.

That this will only happen with a <svg> can be easily shown when the demo is modified to

<?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>

So now a <div> is inside of the parent <div> of exactly the same size - and the scrollbars are appearing.

Can someone enlighten me, why the <div> and the <svg> are behaving differently?

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?)

Note: This is tested with Firefox and Chromium.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光匆匆的小流年 2024-10-18 00:03:28

区别在于，默认情况下 div 是 display: block; 而 svg 是 display: inline; 所以你'遇到了文本基线对齐问题，而 div 则不会出现这种情况。如果将滚动条添加到 CSS，则以下任一操作都应删除滚动条：

svg { display:block; }

或者；

svg { vertical-align: top; }

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: