将 SVG 文件设置为背景 url答案

【问题标题】：Setting an SVG file as a background url将 SVG 文件设置为背景 url
【发布时间】：2014-03-04 16:35:43
【问题描述】：

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

我有一个 svg 文件的徽标。我想让徽标“可点击”并用作主页的链接。我最初使用 jpeg 执行此操作，并且一切都按预期工作，但是一旦我切换到 svg，徽标就不会显示（但是我验证我是否在该一般区域中单击链接有效）。有人对我需要更改的内容有什么建议吗？

我开始认为这可能与 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>

【问题讨论】：

jsfiddle.net/jmarina/GrM3m/3 在 fiddler 上看起来好像没有调用 js，但是在我的实际页面上它是（当我加载网页时出现 h1tags 之间的文本，但不在 fiddler 中）
不，不会。您需要将输出 HTML 添加到 JSfiddle 中。
好的，谢谢你指点我提琴手。我开始认为这可能与 Azure 有关（虽然 svg 在本地打开，但它不会通过项目打开，而其他图像文件可以）

标签： html css azure svg

【解决方案1】：

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

【讨论】：