html - 全屏 svg 类似于适合对象的封面

Question

我已经阅读了很多问题和教程，但仍然无法弄清楚如何正确地使 svg 占据全屏并覆盖它(就像你使用 object-fit: cover ，在我的例子中是 object-position: 0 )，所以没有可见的滚动条。我唯一设法得到的是一个不可滚动的全屏，其中包含可以放入其中的 svg 部分。

svg 位于 <object> 内，因为我需要链接才能工作。

<div class="map">
  <object class="fullscreen-map" type="image/svg+xml" data="europe3.svg">
    Your browser does not support SVG
  </object>
</div>

默认情况下，svg 本身没有 viewBox 并且有 width=1920 和 height=1080 ，但我在尝试我发现的其他东西时也尝试包含一个具有相同尺寸的 viewBox。

Here's a link to the SVG I'm trying to get to fullscreen

到目前为止，我能想到的最好办法是围绕它设置 <object> 的样式，但它只会裁剪，甚至不会尝试缩放 SVG:

.fullscreen-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1020px;
    object-fit: cover;
    object-position: 0;
    font-family: 'object-fit: cover;';
    z-index: -1;
}

我可以通过在 img 标签中添加 SVG 来让它工作，但是我将无法点击其中的链接。

So here is the expected result 如您所见，如果您将视口(viewport)宽高比更改为不同于 16:9 的值，指向不同位置的链接的定位实际上不起作用。如果您有关于如何轻松实现的建议，我也很乐意听到他们的建议:)

谢谢你帮助我!

Answer 1

首先更改您的 CSS。删除 object-fit和 object-position属性。

.fullscreen-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1020px;
    z-index: -1;
}

接下来，您需要修改您的 SVG。在根 <svg>标记，进行以下更改:

1. 删除 width和 height属性。

2. 添加以下属性:

   viewBox="0 0 1920 1080"
   preserveAspectRatio="xMinYMin slice"
   

您的 SVG 现在应该如下所示:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   viewBox="0 0 1920 1080"
   preserveAspectRatio="xMinYMin slice"
   id="svg3157"
   inkscape:version="0.92.1 r15371"
   sodipodi:docname="europe3.svg">
  <sodipodi:namedview
  ...etc...

preserveAspectRatio="xMinYMin slice"相当于你的 object-fit SVG 的设置。 viewBox是必需的，以便浏览器知道它需要多少来缩放 SVG 内容。