在Webkit瀏覽器中沒有顯示SVG圖像

Question

我一直在編寫一個主要用於iPhone的移動網站。我使用SVG來處理圖像，但由於某些原因，只有少數圖像出現。

如果你看一下下面的截圖，你可以看到有缺少的圖標：

如果你看看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; 
} 

Answer 1

啊，你打的是WebKit中的錯誤。即使您使用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。你現在擁有嵌入在HTML中的SVG中的位圖，爲什麼不將矢量化這些位圖或插入普通的PNG？