调整浏览器大小时，SVG顶部有空白

基础概念

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在不失真的情况下缩放到任何大小。SVG图像由一系列的路径、形状、文本和图像组成，这些元素都可以通过CSS进行样式化。

问题原因

当调整浏览器大小时，SVG顶部出现空白可能是由于以下几个原因：

视口（Viewport）设置不正确：SVG元素的视口可能没有正确设置，导致在调整浏览器大小时，SVG内容没有正确地缩放或定位。
CSS样式问题：CSS样式可能会影响SVG的布局，例如margin、padding、position等属性。
SVG内容本身的问题：SVG内部的内容可能存在一些布局问题，导致在调整大小时出现空白。

解决方法

1. 设置正确的视口

确保SVG元素的viewBox属性设置正确。viewBox属性定义了SVG图像的坐标系统和大小，使得SVG可以正确地缩放。

<svg viewBox="0 0 100 100" width="100" height="100">
  <!-- SVG内容 -->
</svg>

2. 调整CSS样式

检查并调整SVG元素的CSS样式，确保没有不必要的margin、padding或position属性影响布局。

svg {
  margin: 0;
  padding: 0;
  position: relative;
}

3. 检查SVG内容

确保SVG内部的内容没有布局问题。例如，确保所有元素的x和y坐标设置正确。

<svg viewBox="0 0 100 100" width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="blue"/>
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

示例代码

以下是一个完整的示例，展示了如何正确设置SVG的视口和样式，以避免调整浏览器大小时出现空白。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Example</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    svg {
      width: 100%;
      height: auto;
      max-width: 500px;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 100 100" width="100" height="100">
    <rect x="0" y="0" width="100" height="100" fill="blue"/>
    <circle cx="50" cy="50" r="40" fill="red"/>
  </svg>
</body>
</html>

参考链接

通过以上方法，你应该能够解决调整浏览器大小时SVG顶部出现空白的问题。

页面内容是否对你有帮助？

有帮助

没帮助

调整浏览器大小时，SVG顶部有空白

、、、、

当我调整浏览器的大小时，一条细小的白线出现在SVG的顶部。如果我再次调整页面大小，它将消失。在特定的页面宽度下，它会重新出现和消失。当我打开SVG文件本身时，我没有看到任何这样的工件。当我将SVG背景设置为一些疯狂的东西时，比如background: red，我可以看到白线在SVG中，因为它变成了红色，而不是由相邻的div创建的某种边框或工件。你知道为什么会这样吗？这是SVG所在的页面：https:/&#x

浏览 87提问于2021-11-23得票数 2

回答已采纳

1回答

当浏览器变小时，无法调整100%宽度图像的大小

、、、、

tl;dr：当图像占用100%的宽度和高度，用户调整浏览器的大小时，文档的宽度和高度不会改变，因为图像不会使其缩小。我有一个动态绘制的SVG映像(由RaphaelJS创建)，它占用了屏幕宽度和高度的100%。它占用的空间包括不可见的空间，但可以通过滚动看到(因此它不仅仅是视口宽度和高度，它还可以超越这个范围)。我需要将SVG画布的大小调整为文档的大小，这样当用户调整浏览器大小时，滚动条就不会出现在图像上，并且当用户<

浏览 4提问于2011-04-24得票数 2

2回答

如何将类似填充的内容添加到SVG组中？

我有下面的SVG -当我的viewport (浏览器)调整大小时，它可以很好地调整大小(并自动调整大小)。<svg x="0" y="0" width:"50%">我想要的是padding:5px之类的内容。5 5px笔画-几乎有效，除了我需要透明度，而且笔画呈现在填充的顶部。转换-但是我的文本也在里面

浏览 6提问于2015-09-03得票数 0

2回答

将div的大小设置为包含较大内容的浏览器窗口的100%

、、、

我在设置div的高度时遇到了一个问题:我有3个div和svg元素，每个元素都是这样的： <div id="1"> <div id="3"><svg></svg> </div></bod

浏览 4提问于2011-03-09得票数 0

回答已采纳

2回答

在移动视图中我的站点背景的右侧和底部不需要的空白。

、

我使用的是引导程序，只有在移动浏览器上，当我调整桌面浏览器的大小时，我才会遇到这个问题，在没有任何额外空白的情况下，背景会调整大小和工作。我还在顶部有一个导航栏，它被移动浏览器截断，但在桌面上却没有。在css中，我有background-size: cover; background-position: center; html { height: 100%}，我也尝试将宽度100%添加到html，

浏览 4提问于2017-04-03得票数 1

回答已采纳

1回答

关于宽高比，如何在可调整大小的SVG背景上放置图形按钮？

、、、、

我们有一个angularjs网站，它有一个很大的SVG图片作为背景。想象一下，这是一幅森林的图片，有一条多风的小路穿过森林。我们希望沿着路径放置图形按钮，用户可以单击这些按钮以转到下一个屏幕。编写应用程序时，如果您调整浏览器的大小，SVG背景将根据其纵横比调整大小。如果浏览器尺寸与SVG的纵横比不同，我们仍然以正确的纵横比显示整个SVG，但图像周围有一个白色边框，用于填充浏览器窗口

浏览 26提问于2019-05-16得票数 0

回答已采纳

1回答

SVG无法调整到父容器的大小

、

我有一个需要与其元素交互的嵌入式svg…下面是点击5楼的例子：在Chrome和Firefox中一切正常，但在IE中太少了？是什么让这玩意儿变成这样？

浏览 0提问于2016-02-04得票数 0

1回答

、

我有一个全屏背景图像，可以根据浏览器的尺寸进行缩放。我想要做的是在整个图像上绘制“兴趣点”，这样当用户将鼠标悬停在一个兴趣点上时，就会弹出一个描述。问题是，图像会根据浏览器的尺寸缩小和增长，而我很难将点保持在正确的位置。任何帮助都是非常感谢的。

浏览 1提问于2011-04-22得票数 1

1回答

根据浏览器宽度和从顶部开始的Y位置更改Img

、、

我有一些代码，允许我更改img src时，我已经从顶部滚动< 120像素。但当浏览器调整大小时，我也需要将图像更改为另一个图像。所以我应该得到，当我向下滚动120px时得到1张图像，如果我已经向下滚动120px，得到1张图像，但我将浏览器的大小减少到850像素，如果我在浏览器的完全顶部，则得到1张图像，如果我减小浏览器的大小，则会得到另一张图像到目前为止，我只能在向下滚动120px的情况下更改img src，但如何同时解决<em

浏览 0提问于2015-12-15得票数 2

1回答

、、、

我想创建一个包含两个div的容器:第一个div (左边)包含一个svg大小可调的第二个div(右边)包含文本我的问题是，当我调整浏览器大小时，第二个div与第一个div重叠。另一个问题是，当我调整浏览器大小时，div文本不能位于div svg的下方或上方。提前感谢您的回复

浏览 31提问于2019-02-22得票数 0

1回答

在FabricJs上加载svg中的大图像时出现问题

、、

我们正在使用一个FabricJS编辑器，并将SVG模板加载到其中。我们也在编辑一些文本，改变对象的位置，并保存为SVG。这里一切都很好。但是现在我们需要在一个SVG中加载非常大的图像。SVG中的每个图像都将是高分辨率的，因为这是用于印刷行业。这里我们无法加载SVG，因为嵌入的图像非常大。我们想到了一个解决方案，在加载到编辑器之前重新调整这些图像的大小，并在编辑之后将原始图像作为输出返回。但是，当我们调整大小时，这也

浏览 2提问于2014-07-17得票数 0

点击加载更多