Question

很抱歉，如果这个问题看似微不足道，这是我第一次使用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;  
     }

标题由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

将SVG文件设置为后台URL

1 个答案: