Question

我的svg，与png一样，图像没有出现在最新版本的Mozilla 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;
}

Answer 1

尝试将MIME类型SVG（image / 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>

Answer 2

虽然图片是世界可读的，但我必须将文件的所有者从root切换到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文件。

代码/路径没有问题。这是服务器的一个奇怪的权限问题！

如果有人知道为什么我必须改变用户，即使它已经是世界可读的，请告诉我！

SVG / PNG没有出现在Firefox中

2 个答案: