Html Firefox中未显示SVG/PNG_Html_Css_Firefox_Svg_Png

Html Firefox中未显示SVG/PNG

html css firefox svg

Html Firefox中未显示SVG/PNG,html,css,firefox,svg,png,Html,Css,Firefox,Svg,Png,我的svg和png一样，图像没有显示在最新版本的Mozilla Firefox中我试图以更小的div（#导航栏位于页面顶部）的方式显示它尽管如此，唯一显示的是备选文本。权限正确，apache用户可以读取图片，HTML中svg/png的路径也正确 HTML: <div id="navigationBar"> <img src="pictures/logo.svg" alt="mm World" /> <a href="mmHome.html" class

我的svg和png一样，图像没有显示在最新版本的Mozilla Firefox中

我试图以更小的div（

#导航栏

位于页面顶部）的方式显示它

尽管如此，唯一显示的是备选文本。 权限正确，apache用户可以读取图片，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>

#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;
}

尝试将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>


#导航栏{
背景色：#660099；
文本对齐：居中；
}
.导航按钮{
背景色：透明；
边框底部：2倍纯色透明；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：arial；
字号：17px；
填充：16px 31px；
文字装饰：无；
文本阴影：0px 1px 0px#2f6627；
}
.导航按钮已选中{
背景色：透明；
边框底部：2px实心#18ab29；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：arial；
字号：17px；
填充：16px 31px；
文字装饰：无；
文本阴影：0px 1px 0px#2f6627；
}
.导航按钮：悬停{
边框底部：2px实心#18ab29；
}
.navigationButton.navigationButtonSelected:活动{
位置：相对位置；
顶部：1px；
}
欢迎来到mm

虽然图像是世界可读的，但在我的

Ubuntu服务器14.04上，我必须将文件的所有者从root切换到www-data（默认apache用户）
：
sudo chown www-data:www-data /pathtoimage/logo.svg

之后，我建议将所有者、所有者组和所有人的文件访问权限设置为只读：
sudo chmod 444 /pathtoimage/logo.svg

通过这种方式，我确保即使apache遭到破坏，黑客也只能读取logo.svg文件
代码/路径没有问题。这是一个奇怪的服务器权限问题
如果有人知道为什么我必须改变用户，即使它已经是世界可读的，请告诉我
 每像素11字节？你考虑过把它保存为PNG吗？@squemishossifrage首先我用PNG做了尝试。。同样的结果。因此，这并不是问题的根源，我更喜欢无损失的可扩展性而不是存储/下载时间延长0.01ms如果png也出现同样的情况，那么这不是SVG问题，您应该重新编写、重写和重新标记问题。@RobertLongson说得对！编辑了这个问题。也许你有个主意？这些图像的mime类型是什么？