时间戳

首页 > 解决方案 > 如何将svg设置为背景全屏？

html - 如何将svg设置为背景全屏？

问题描述

我已经为我的网站创建了一个内联 svg 代码作为我的背景，但是每当我水平调整窗口大小时，网站底部都是一个空白区域。这是我网站的示例代码。这是我网站的 CSS：

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
    }

我的 svg 的视图框是 0 0 1920 902。 svg 的水平边始终连接到窗口的一侧。overflow: scroll;我想要 svg 的大小，用户可以滚动查看溢出区域，但即使在我添加body css 后它也不起作用。例子

标签： htmlcsssvg

解决方案

基于评论的新答案：

如果您需要一个严格在其中一个六边形内的按钮，一种选择是在其中一个六边形内放置一个矩形/文本。然后将其包装在<g>带有适当类的（组）标签中，然后在<a>标签中，也带有类或id。这是一个 SVG<a>而不是 HTML，但工作方式类似）。

如果没有大量额外的工作，您将无法在 SVG 中使用 HTML。要使 HTML 超过内联 SVG，您需要绝对定位按钮，或定位内联 SVG 绝对/固定。使用 SVG 作为 CSS 背景会更容易。您可以通过使用百分比或视图宽度来确保按钮与背景对齐，但是如果您想要真正的响应，您需要确定六边形在 SVG 上的百分比。我建议使用 SVG 内部元素<a>，或者仅接受背景不会完全对齐。

老答案：

你可以试试 width="100%" height="100%"。否则，您可以使用 SVG 编辑器来确保视图框与 SVG 本身匹配。我使用 Adob​​e XD，Illustrator。您可以使用 Inkscape。

推荐阅读