未出现在iPad上的SVG背景图像

我在网站上出现了一个非常奇怪的问题。我使用多个背景图片;有4张照片，然后是一个有角度的形状的SVG，超过图像并对其进行构图。这是用于身体背景的CSS未出现在iPad上的SVG背景图像

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

任何想法，为什么它的不工作？

来源

2013-09-24 Ryan Giglio

这很奇怪。该图片在iPad上自行加载，[其SVG有效]（http://validator.w3.org/check?uri=http%3A%2F%2Fjohnkatimaris.thesmackpack.com%2Fimg%2Fdesktop-bg。 svg＆charset =％28detect + automatic％29＆doctype = Inline＆group = 0）并正确设置了MIME。尝试用一些文本创建一个页面，只有那个背景并从那里开始。或者将您的iPad插入Safari并使用[其网络检查器]（http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/） –

我遇到了另一个不同的站点上有不同的SVG文件再次遇到这个问题，并有同样的问题。它似乎就像iPad会显示SVG的高度有某种无证的限制。这并没有什么意义，我真的不认为它确实是这种情况，但这是我能想到的唯一的事情，因为缩短图像会在两种情况下立即修复它。

来源

2013-11-25 15:51:10

正如您所说，将高度设置为5400px将使我的svg不再显示。似乎在背景位置修复后具有背景大小。 http://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone – Amalgovinus

未出现在iPad上的SVG背景图像

回答

相关问题