SVG 图像未在 IOS 设备上加载答案

【问题标题】：SVG image not loading on IOS devicesSVG 图像未在 IOS 设备上加载
【发布时间】：2021-10-25 13:30:07
【问题描述】：

我使用 github 域发布了一个网站，它在任何计算机上都可以正常工作，但是当我在不同的 iPhone 上打开该网站时，SVG 图像没有加载，有人知道如何解决吗？

在我的 index.html 文件中，我有一个带有显示图像的类的 div：

<style>

      .spacer {
        aspect-ratio: 960/300;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .layer1 {
        background-image: url("./layer1.svg");
      }

</style>
<body>

      <div class="spacer layer1"></div>

</body>

图像在计算机和安卓设备上显示完美，但在我测试过的任何 IOS 手机上都无法加载。

如何让它在任何设备上加载？

谢谢！

【问题讨论】：

标签： html css image web svg

【解决方案1】：

尝试将background-size 放在background-position 之前。在某些 IOS 设备上似乎存在与此相关的错误：http://geoffmuskett.com/strange-bug-on-ios-svg-background-images-no-showing/

<style>

      .spacer {
        aspect-ratio: 960/300;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
      }

      .layer1 {
        background-image: url("./layer1.svg");
      }

</style>
<body>

      <div class="spacer layer1"></div>

</body>

【讨论】：

感谢您的建议！但是我刚试了一下，好像还是不行，问题是一样的，androids可以用，ios设备不行。