个人中心
gpt4 book ai didi

html - SVG/PNG 未在 Firefox 中显示

转载 作者：太空宇宙 更新时间：2023-11-03 17:38:34 26 4
gpt4 key购买 nike

我的 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;
}

最佳答案

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

关于html - SVG/PNG 未在 Firefox 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29451521/

26 4 0
文章推荐： ruby - ruby 中正则表达式的比较
文章推荐： python - Django request.GET ('variable' ) 获取多个值
文章推荐： ruby - 直接在 ruby​​ 中使用实例变量是不好的形式吗？
文章推荐： python - xlrd 单元格值返回错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com