SVG/PNG未顯示在Firefox中

我的svg與png相同，圖像未顯示在最新版本的Mozilla Firefox中。SVG/PNG未顯示在Firefox中

我想以更小的div顯示它（頁面頂部的#navigationbar）。

雖然，唯一顯示的是替代文字。 權限是正確的，並且apache-user可以讀取圖片，在HTML中svg/png的路徑也是正確的。

HTML：

<div id="navigationBar"> 
    <img src="pictures/logo.svg" alt="mm World" /> 
    <a href="mmHome.html" class="navigationButtonSelected">Home</a><a href="ubuntuOverview.html" class="navigationButton">Ubuntu</a> 
</div> 

<div id="content"> 
    <h1>Welcome to mm</h1> 
</div>

CSS：

#navigationBar { 
    background-color:#660099; 
    text-align:center; 
    } 

.navigationButton { 
    background-color:transparent; 
    border-bottom:2px solid transparent; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 

.navigationButtonSelected { 
    background-color:transparent; 
    border-bottom:2px solid #18ab29; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 

.navigationButton:hover { 
    border-bottom:2px solid #18ab29; 
} 

.navigationButton.navigationButtonSelected:active { 
    position:relative; 
    top:1px; 
}

來源

2015-04-04 MMike

每個像素11個字節？你有沒有考慮將它保存爲PNG？ – 2015-04-04 21:44:50

@squeamishossifrage首先，我嘗試了一個PNG ..具有相同的結果。所以這不會導致問題，我更喜歡無損可擴展存儲/ 0.01ms更長的下載 – MMike 2015-04-04 22:53:58

如果png出現同樣的情況，那麼這不是一個SVG問題，您應該重新編寫問題，重新編寫並重新記錄問題。 – 2015-04-05 06:15:26

雖然形象是世界可讀的，我不得不從根文件的所有者切換到www-data(default apache user)我Ubuntu Server 14.04：

sudo chown www-data:www-data /pathtoimage/logo.svg

之後我建議爲所有者，所有者組和所有人設置文件訪問權限read-only：

sudo chmod 444 /pathtoimage/logo.svg

這樣我確信，即使在Apache遭到入侵時，黑客也只能讀取logo.svg文件。

代碼/路徑沒有問題。這是/是服務器的一個奇怪的權限問題！

如果有人知道爲什麼我必須改變用戶，即使它已經是世界可讀的請告訴我！

來源

2015-04-12 13:40:22 MMike

嘗試MIME類型SVG（圖像/ SVG + XML）添加到您的服務器（IIS，Apache的...）並嘗試用Inkscape或文本編輯器打開SVG文件以確認是第一行的SVG文件格式：

<?xml version="1.0" encoding="UTF-8"?>

你對我的CSS和HTML代碼的工作：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#navigationBar { 
    background-color:#660099; 
    text-align:center; 
    } 

.navigationButton { 
    background-color:transparent; 
    border-bottom:2px solid transparent; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 

.navigationButtonSelected { 
    background-color:transparent; 
    border-bottom:2px solid #18ab29; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 

.navigationButton:hover { 
    border-bottom:2px solid #18ab29; 
} 

.navigationButton.navigationButtonSelected:active { 
    position:relative; 
    top:1px; 
} 
</style> 
</head> 
<body> 

<div id="navigationBar"> 
    <img src="http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg" alt="mm World" width="100" height="100"/> 
    <a href="mmHome.html" class="navigationButtonSelected">Home</a><a href="ubuntuOverview.html" class="navigationButton">Ubuntu</a> 
</div> 

<div id="content"> 
    <h1>Welcome to mm</h1> 
</div> 

</body>

來源

2015-04-07 05:37:58

SVG/PNG未顯示在Firefox中

回答

相關問題