SVG/PNG 未在 Firefox 中显示

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

虽然图像是世界可读的，但我不得不在 Ubuntu Server 14.04:

上将文件的所有者从 root 切换到 www-data(default apache user)

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

之后我建议将所有者、所有者组和所有人的文件访问权限设置为 read-only：

sudo chmod 444 /pathtoimage/logo.svg

这样我可以确保即使 apache 受到威胁，黑客也只能读取 logo.svg 文件。

code/path没有问题。 was/is奇怪的服务器权限问题！

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

SVG/PNG 未在 Firefox 中显示

SVG/PNG not showing up in Firefox

html

css

firefox

svg

png