html - 将 SVG 文件设置为背景 url

Question

抱歉，如果这个问题看起来微不足道，这是我第一次使用 svg 文件，并且无法解决堆栈中现有 Q 和 A 的问题。

我有一个 Logo ，它是一个 svg 文件。我想让 Logo “可点击”并用作主页链接。我最初是用 jpeg 做的，一切都按预期工作，但是一旦我切换到 svg， Logo 就不会显示(但是我会验证我是否在该一般区域中单击链接有效)。有人对我需要更改什么才能显示图像有任何建议吗？

我开始认为这可能与 Azure 有关(虽然 svg 在本地打开，但它不会通过元素打开，而其他图像文件会打开。

SVG 文件是使用 inkscape 创建的，当作为独立文件打开时可以在浏览器中正确呈现。

JavaScript 将页眉加载到每个页面:

//Header for Main pages, with Logo
function getHeader()
{
    var header='<ul id="hlogob">'+
               '<li><a href="../BigHatHome.html" class="hlogo">Home</a></li>'+
               '</ul>'+
               '<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}

CSS 样式标题，并链接背景图片(希望它是我的 svg)

/*Header styling and Logo*/
.header
    {
    background-color:#FAFAEB;
    text-align:center;
    font-family: Algerian;
    color: #37342a;
    height:100px;
    padding-bottom:10px;
    /*border-bottom:5px inset #DCDCDC;*/
    margin:0px; 
    line-height:20%
    }


    ul#hlogob li 
    {
        display: inline;
        list-style: none;
     }

    ul#hlogob li a 
    {
        color: #999;
        text-decoration: none;
    }

    a.hlogo 
    {
        display: inline-block;
        background: url("../Images/bighat4.svg") no-repeat;
        background-position: center;
        background-size: 100px 70px;
        width: 100px;
        height: 70px;
        text-indent: -9999px;
        text-align: center;
        margin: 0;
     }

    a.hlogo:hover 
     {
        border: none;  
     }   

Header由js加载到每个页面上

<header class="header" id="header">
<!--Loaded by Script-->
</header>


<script type="text/javascript">
    getHeader();
</script>

Answer 1

事实证明，问题不在于代码，而在于 azure 上的默认设置，它没有 svg 的 mime 类型。参见 Use SVG in Windows Azure Websites