Question

所以我的导航栏版本中有一堆SVG图标，但由于某种原因，我正在使用的CSS转换时间未被应用。这种情况发生在Chrome，IE和Safari中。它适用于Firefox / Nightly和Opera / Opera Next。

以下是无效的CSS

CSS:
#liIco
{
    fill: #fff;
    -webkit-transition: fill .5s;
       -moz-transition: fill .5s;
         -o-transition: fill .5s;
            transition: fill .5s;
}

 a:hover #liIco
{
    fill: #000;
    -webkit-transition: fill .5s;
       -moz-transition: fill .5s;
         -o-transition: fill .5s;
            transition: fill .5s;
}

这是一个小提琴，虽然具有讽刺意味的是它在这里起作用：http://jsfiddle.net/FwKQe/1/

我认为问题可能是在我的实际文件中我使用PHP来包含像这样的文件......

PHP（来自我文件的实际来源）：

<aside id="sideContent">

    <div id="menuButton">

        <?php include ("icons/menu_w.svg"); ?>

    </div>

    <!-- This is the main NAV block -->


    <a href="index.php"><div id="imgHome"><?php include ("icons/home.svg"); ?></div></a>
    <a href="about.php"><div id="imgAbout"><?php include ("icons/about.svg"); ?></div></a>
    <a href="portfolio.php"><div id="imgWork"><?php include ("icons/work.svg"); ?></div></a>

还有一点需要注意，顶部的菜单按钮始终有效，而且它也是PHP包含的，所以我很遗憾。任何帮助表示赞赏，谢谢！

CSS转换未应用于Google Chrome中的SVG元素

0 个答案: