Question

我一直在我的网站上使用svg图形作为css背景，无法让它们显示在我的网站上。有没有一种简单的方法来解决为什么会发生这种情况？我在我的网站栏上禁用了所有css驱动facebook图标css背景的规则？然而，这没有效果，图形仍然隐藏？当我用png图形替换svg时，图标显示正常。

相关网页位于： http://sandpit.jonathanbeech.co.uk/

我在本地计算机上的测试html页面上使用了相同的代码，svg图形显示完美。有什么办法可以解决这个问题吗？在我编写的代码中是否存在与浏览器的svg功能冲突的内容？

这是html

<div>
<h3 class="cliptypeheadersmaller">Connect with me</h3>
<div class="svgicon"></div>
<ul>
<li class="facebook_main_col"><a href="#">facebook</a></li>
<li>Twitter</li>
<li>Linked In</li>
</ul>
</div>

这是css。

/* @group svg icons */

.facebook_main_col {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 100px;
  background: url(../images/facebook-square-icon.svg) no-repeat;
  background-size: 100px 100px;
}

.svgicon {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 100px;
    background: url(../images/facebook-square-icon.svg) no-repeat;
    background-size: 100px 82px;
}

SVG图形没有显示在我的主页上

0 个答案: