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>标记中，进行以下更改：

删除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内容需要多少。

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

1 个答案: