全屏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。

这是我要进入全屏模式的SVG的链接

到目前为止，我能想到的最好的方法是对其<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来使其正常工作，但随后我将无法单击其中的链接。

因此，这是预期的结果，并且如您所见，如果将视口的宽高比更改为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-fitSVG 的设置等效。在viewBox需要使浏览器知道它需要多少缩放SVG contents`。