SVG悬停不会像预期的那样改变颜色

Question

原始问题模糊。

我正在编辑一个使用三个"字体令人叹为观止"字形的网络模板。当我悬停在它们上时，它们从白色过渡到橙色。我找到了一个我非常喜欢的图标，可以在iComoon.io/app页面上搜索" paint"。

。

他们为我提供了一个参考链接，以放入我的HTML体内。是：

<symbol id="icon-paint-format" viewBox="0 0 1024 1024">
<title>paint-format</title>
<path class="path1" d="M1024 576v-384h-192v-64c0-35.2-28.8-64-64-64h-704c-35.2 0-64 28.8-64 64v192c0 35.2 28.8 64 64 64h704c35.2 0 64-28.8 64-64v-64h128v256h-576v128h-32c-17.674 0-32 14.326-32 32v320c0 17.674 14.326 32 32 32h128c17.674 0 32-14.326 32-32v-320c0-17.674-14.326-32-32-32h-32v-64h576zM768 192h-704v-64h704v64z"></path>

然后通过使用：

来引用它

<svg class="icon icon-paint-format"><use xlink:href="#icon-paint-format"></use></svg>

3个图标的HTML看起来像这样：

<div class="work-grids">
                <div class="col-md-4 work-grid">
                    <span class="col-md-5 w-icon"> <i class="fa fa-phone"> </i></span>
                    <div class="col-md-7 work-info">
                        <h4>Research</h4>
                        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
                    </div>
                </div>
                <div class="col-md-4 work-grid center-work-grid">
                    <span class="col-md-5 w-icon"> <i class="fa fa-usd"></i></span>
                    <div class="col-md-7 work-info">
                        <h4>Design</h4>
                        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
                    </div>
                </div>
                <div class="col-md-4 work-grid">
                    <span class="col-md-5 w-icon"><img src="images/paint-format.svg"></span>
                    <div class="col-md-7 work-info">
                        <h4>Develop</h4>
                        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
                    </div>
                </div>
                <div class="clearfix"> </div>
                <div class="work-map">
                    <span> </span>
                </div>
            </div>
            <!---- //End-work-grids----->

您使用的第三级别类别可以看到：

<img src="images/paint-format.svg">

导入SVG图标。

现在，所有三个图标的相应CSS是：

/*---- start-work----*/
.work{
    background: #4F4F57;
    padding: 5em 0;
}
.work-head h3,.work-head p{
    color:#FFF;
}
.work-grid span{
    width:140px;
    height:140px;
    display:inline-block;
    background:#ff9000;
    border:6px solid #ffddb0;
    border-radius:30em;
    -webkit-border-radius:30em;
    -moz-border-radius:30em;
    -o-border-radius:30em;
    -ms-border-radius:30em;
    z-index: 999;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
}
.w-icon{
    text-align:center;
}
.w-icon i{
    color: #fff;
    font-size: 2.2em;
    margin-top: 1.4em;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
}
.work-info h4{
    color: #FFF;
    font-weight: 600;
    font-size: 1.6em
}
.work-info p{
    color: #FFF;
    font-size: 0.875em;
}
.work-grids{
    margin-top:4em;
}
.center-work-grid{
    margin-top: 8em;
}
.work-grids{
    position: relative;
}
.work-map{
    width: 850px;
    height: 237px;
    background: url(../images/work-map.png) no-repeat 0px 0px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left:10%;
}
.work-grid:hover span{
    background:#F3F3F3;
    border-color:#EBEBEB;
}
.work-grid:hover .w-icon i{
    color:#ff9000;
}
/*---- //End-work----*/

我从模板中编辑的只是将非悬停图标颜色更改为#fff（white），然后将它们顺利过渡到＃ff9000（橙色），因为我的鼠标徘徊在它们上。前两个字形取得了成功，与此同时，第三个也不会：

a）当不徘徊时，似乎是白色的；b）当悬停在

上时（平稳地）向橙色过渡

我希望我已经清除了这个问题

Answer 1

tl; dr。跳过了：

a）当不徘徊时，似乎是白色的；b）过渡 （平滑）悬停在

上时橙色

我有一段时间以前进行了这些演示，但我认为您可能会发现它们有帮助：

1. 简单的演示
2. 彻底的演示