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

Question

我已经阅读了很多问题和教程，但仍然无法弄清楚如何正确地使 svg 占据全屏并覆盖它（就像您使用 object-fit: cover 和在我的情况下使用 @987654325 一样@)，因此没有可见的滚动条。我唯一设法得到的是一个不可滚动的全屏，其中包含可以放入其中的 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 属性。

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