SVG 背景图像未出现在 iPad 上

Posted 2023-03-12

【中文标题】SVG 背景图像未出现在 iPad 上

【英文标题】：SVG background image not appearing on iPad

【发布时间】：2013-09-24 15:04:51

【问题描述】：

我遇到了一个非常奇怪的网站背景问题。我正在使用多个背景图片；有 4 张照片，然后是一个倾斜形状的 SVG，它越过图像并将它们框起来。这是正文背景的 CSS

body 
    background-color: #bbe2de;
    background-image: url('/img/mobile-bg-exorcised.svg');
    background-position: top center;
    background-repeat: no-repeat;

    color: #2a2a2a;

    font-family: "ff-din-web";
    font-size: 16px;
    line-height: 1.4em;

@media screen and (min-width: 600px) 
    body 
        background: 
            url('/img/desktop-bg.svg') top left,
            url('/img/bg-photo-4.jpg') 849px 4460px,
            url('/img/bg-photo-3.jpg') 0 3948px,
            url('/img/bg-photo-2.jpg') 617px 980px,
            url('/img/bg-photo-1.jpg') 0 186px;
        background-repeat: no-repeat;
    

它在所有桌面浏览器上都能正常显示，但在 iPad 上，SVG 根本不显示。其余图像显示正常。我在网站的其他地方使用 SVG 作为背景图片，它们显示正常，所以我认为这不是 MIME 类型之类的服务器问题。

这是该网站的链接，现场直播： http://johnkatimaris.thesmackpack.com/

这里是有问题的 SVG 文件，以防您认为它可能有问题：http://d.pr/f/2vp4

关于它为什么不起作用的任何想法？

【问题讨论】：

这很奇怪。图像在 iPad 上自行加载良好，its SVG is valid 并且 MIME 设置正确。尝试创建一个只有一些文本和背景的页面，然后从那里开始工作。或者将您的 iPad 插入 Safari 并使用 its web inspector

【参考方案1】：

我在使用不同 SVG 文件的不同站点上再次遇到了这个问题，并且遇到了同样的问题。似乎 iPad 显示 SVG 的高度存在某种未记录的限制。这真的没有意义，我真的不认为实际上是这样，但这是我唯一能想到的，因为缩短图像在这两种情况下都会立即修复它。

【讨论】：

如您所说，将高度设置为 5400px 将使我的 svg 不再显示。似乎在 background-position 修复它之后有 background-size 。 ***.com/questions/18999660/…