Webkit浏览器中不显示SVG图片

Question

Webkit浏览器中不显示SVG图片

3

我一直在编写一个主要面向iPhone的移动网站。我正在使用SVG作为图像，但是由于某种原因，只有少数图像显示出来。

如果您查看下面的屏幕截图，您会发现有一些图标缺失：

enter image description here

如果您访问https://mobile.hollatme.com/，您可以看到这个错误的表现。您会注意到顶部的徽标没有出现。但是，如果您直接导航到徽标文件https://mobile.hollatme.com/css/svg/logo.svg，然后返回到页面，它将会出现。

HTML:

<div class="profileItems">
    <a class="notificationsProfileItem" href="javascript:{}" data-loc="notifications">Notifications <span></span></a>
    <a class="neighborhoodsProfileItem" href="javascript:{}" data-loc="strolling">Strolling <span></span></a>
    <a class="streamProfileItem" href="javascript:{}" data-loc="stream">Stream <span></span></a>
    <a class="interestsProfileItem" href="javascript:{}" data-loc="interest-trends">Interest Trends <span></span></a>
    <a class="photosProfileItem" href="javascript:{}" data-loc="photos">Photos <span></span></a>
    <a class="shuffleProfileItem" href="javascript:{}" data-loc="shuffle">Shuffle Feeds <span></span></a>
    <a class="messagesProfileItem" href="javascript:{}" data-loc="messages">Messages <span></span></a>
    <a class="neighborsProfileItem" href="javascript:{}" data-loc="neighbors">Neighbors <span></span></a>
    <a class="friendsProfileItem" href="javascript:{}" data-loc="friends">Friends <span></span></a>
    <a class="settingsProfileItem" href="javascript:{}" data-loc="settings">Settings <span></span></a>
</div><!-- End profile items -->

CSS :

.profileItems {}

.profileItems a {
    display:block;
    background-color:#F2F2F2;
    margin:0 0 0.1em 0;
    padding:1.5em 1em 1.5em 2.8em;
    color:#595959;
    font-weight:bold;
    font-size:0.8em;
    opacity:0;
}

    .profileItems a span {
        display:block;
        background:url(svg/goArrow.svg) no-repeat;
        background-size:1em;
        float:right;
        height:1.5em;
        width:1em;
        margin:-0.1em 0 0 0;
    }

.shuffleProfileItem {
    background-image:url(svg/feeds.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.notificationsProfileItem {
    background-image:url(svg/holla.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborhoodsProfileItem {
    background-image:url(svg/neighborhoods.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.interestsProfileItem {
    background-image:url(svg/interests.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.messagesProfileItem {
    background-image:url(svg/message.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.photosProfileItem {
    background-image:url(svg/photo.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborsProfileItem {
    background-image:url(svg/neighbors.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.friendsProfileItem {
    background-image:url(svg/friends.svg);
    background-repeat:no-repeat!important;
    background-size:1.8em;
    background-position:0.5em;
}

.settingsProfileItem {
    background-image:url(svg/settings.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

- André Figueira

显而易见的问题：您已经检查过所有SVG文件是否已上传？您尝试直接查看“缺失”的图标了吗？ - cimmanon

它们都在那里，一个奇怪的事情是，如果我访问这些SVG的URL，它们突然出现在它们应该出现的地方。 - André Figueira

它们有尺寸吗？在SVG内部，而不是HTML中？ - Christian Kuetbach

有一个大小，但这与尺寸或任何东西无关。如果直接加载SAG，则可以正常工作，这意味着存在某种加载问题。 - André Figueira

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

啊，你遇到了Webkit的一个bug。如果元素中有嵌入式位图图像，即使你对它们进行编码，使用CSS也无法显示。为了解决这个问题，你需要将实际的SVG文件插入到一个不可见的容器中（呃），然后CSS中引用的图像就会显示出来。你可以这样做...

<div class="icons">
  ... put all your svg code here
</div>

并且在您的样式表中：

.icons {
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

您也可以直接插入普通的PNG图片。现在的情况是将位图嵌入到SVG图像中，再将其嵌入到HTML中。为什么不将这些位图矢量化，或者直接插入普通的PNG呢？