Fullscreen svg类似于object-fit封面

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，如您所见，如果您将视口的纵横比更改为不同于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：

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"等同于SVG的object-fit设置。需要viewBox，这样浏览器才能知道它需要缩放多少SVG内容。