html - URL 不适用于 SVG 图形

Question

我给了我的 SVG 格式的标志，并把 <a>在 object 周围标记元素。但是我的 anchor 标签不起作用，它只是在 svg 图形下显示了 10px 的高度。看看我的代码，这将清楚地说明我在说什么..

<a href="#" class="logo">
<object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
<!--[if (gte IE 6)&(lte IE 8)]>
  <img src="images/tc_logo.png">
<![endif]-->
</object>
  </a>

我将 Logo 类设置为 display:block但它不起作用..

CSS

.logo{
width: 100%;
height: 210px;
display: block;
cursor:pointer;
}

已编辑

最后我找到了一个解决方案，我知道这不是正确的方法，但如果您还没有准备好退后一步使用 SVG.. 试试这个..

像这样使用 html..

<span style="display:block; position:relative;">
<a href="#" class="logo"></a>
    <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
    <!--[if (gte IE 6)&(lte IE 8)]>
      <img src="images/tc_logo.png">
    <![endif]-->
    </object>
</span>

css 会是..

.logo {
    display: block;
    height: 210px;
    position: absolute;
    width: 100%;
    z-index:9
}

希望你有诀窍..

Answer 1

这是一种丑陋的方式:

<a href="#" class="logo">
    <![if gte IE 9]>
       <img src="images/tc_logo.svg">
    <![endif]>
    <!--[if lt IE 9]>
       <img src="images/tc_logo.png">
    <![endif]-->
</a>

直播example here .

虽然这在旧的 android 浏览器上不起作用，因此最好研究其他选项，例如一旦检测到缺少 svg 支持(需要 javascript)，就用 png 后备替换所有 svg。参见例如 http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1 .