URL无法解决SVG图形问题

时间:2012-12-19 19:57:17

标签: html css html5 css3 svg

我以SVG格式提供了我的徽标,并在<a>元素周围添加了object标记。但我的锚标签在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>

我将徽标类设为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
}
希望你能得到诀窍..

3 个答案:

答案 0 :(得分:0)

你可以通过让你的SVG成为一个图像标签而不是一个对象标签来做到这一点,或者你也可以摆脱这种轻微的黑客攻击!

<a href="#" class="logo">
    <span style="display: block;">
        <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>
</a>

答案 1 :(得分:0)

这是一个丑陋的方式:

<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后备替换所有svgs。请参见例如http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1

答案 2 :(得分:0)

或者,您可以使用CSS删除指针事件。 object似乎取代了锚标记事件,因此删除它似乎会重新激活锚标记:​​

.logo object {pointer-events:none;}

请注意,我目前只使用Chrome来执行此操作,并未在任何地方对其进行测试。