Question

我以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
}

希望你能得到诀窍..

Answer 1

你可以通过让你的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>

Answer 2

这是一个丑陋的方式：

<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。

Answer 3

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

.logo object {pointer-events:none;}

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

URL无法解决SVG图形问题

3 个答案: