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

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

These are my files

And this is one of the SVG image files

在我的 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设备不行。
    猜你喜欢
    • 2017-02-19
    • 2013-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多