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中

回答

相关问题