如何在不更改框阴影颜色的情况下更改 svg 颜色

Question

我有以下 sn-p，当我悬停时，我有一个蓝色的左阴影，我想保持这种颜色。

ul {
    list-style: none;
}

a{
  text-decoration: none;
}

#app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a {
    background-size: 16px 16px;
    background-position: 14px center;
    background-repeat: no-repeat;
    display: block;
    justify-content: space-between;
    line-height: 44px;
    min-height: 44px;
    padding: 0 12px 0 44px;
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
    opacity: 0.57;
    flex: 1 1 0px;
    z-index: 100;
}

.nav-icon-files {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
}

#app-navigation:not(.vue) > ul > li.active,
#app-navigation:not(.vue) > ul > li a:hover,
#app-navigation:not(.vue) > ul > li a:focus,
#app-navigation:not(.vue) > ul > li a:active, 
#app-navigation:not(.vue) > ul > li a.selected,
#app-navigation:not(.vue) > ul > li a.active, 
#app-navigation:not(.vue) > ul > li.active > a, 
#app-navigation:not(.vue) > ul > li a:hover > a,
#app-navigation:not(.vue) > ul > li a:focus > a,
#app-navigation:not(.vue) > ul > li a:active > a, 
#app-navigation:not(.vue) > ul > li a.selected > a,
#app-navigation:not(.vue) > ul > li a.active > a {
    opacity: 1;
    box-shadow: inset 4px 0 blue;
}

body{
  background: #1e272e;
}

<div id="app-navigation">
    <ul class="with-icon">
        <li data-id="files" class="nav-files">
            <a href="#" class="nav-icon-files svg">Files</a>
        </li>
    </ul>
</div>

这是我更改 svg 颜色的方法：

ul {
    list-style: none;
}

a{
  text-decoration: none;
}

#app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a {
    background-size: 16px 16px;
    background-position: 14px center;
    background-repeat: no-repeat;
    display: block;
    justify-content: space-between;
    line-height: 44px;
    min-height: 44px;
    padding: 0 12px 0 44px;
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
    opacity: 0.57;
    flex: 1 1 0px;
    z-index: 100;
}

.nav-icon-files {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
}

#app-navigation:not(.vue) > ul > li.active,
#app-navigation:not(.vue) > ul > li a:hover,
#app-navigation:not(.vue) > ul > li a:focus,
#app-navigation:not(.vue) > ul > li a:active, 
#app-navigation:not(.vue) > ul > li a.selected,
#app-navigation:not(.vue) > ul > li a.active, 
#app-navigation:not(.vue) > ul > li.active > a, 
#app-navigation:not(.vue) > ul > li a:hover > a,
#app-navigation:not(.vue) > ul > li a:focus > a,
#app-navigation:not(.vue) > ul > li a:active > a, 
#app-navigation:not(.vue) > ul > li a.selected > a,
#app-navigation:not(.vue) > ul > li a.active > a {
    opacity: 1;
    box-shadow: inset 4px 0 blue;
}

body{
  background: #1e272e;
}


/* CUSTOM */

.nav-icon-files{
    filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
}

<div id="app-navigation">
    <ul class="with-icon">
        <li data-id="files" class="nav-files">
            <a href="#" class="nav-icon-files svg">Files</a>
        </li>
    </ul>
</div>

现在我的图标颜色改变了，我的box-shadow也改变了。我怎样才能保持原来的颜色？

编辑：

.nav-icon-files:before{
    filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
}

Answer 1

稍微调整你的代码并使用伪元素代替背景

ul {
    list-style: none;
}

a{
  text-decoration: none;
}

#app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a {
    background-size: 16px 16px;
    background-position: 14px center;
    background-repeat: no-repeat;
    display: block;
    justify-content: space-between;
    line-height: 44px;
    min-height: 44px;
    padding: 0 12px 0 28px;
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
    opacity: 0.57;
    flex: 1 1 0px;
    z-index: 100;
    color:#fff;
}

.nav-icon-files:before {
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:5px;
    vertical-align:text-bottom;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
}

#app-navigation:not(.vue) > ul > li.active,
#app-navigation:not(.vue) > ul > li a:hover,
#app-navigation:not(.vue) > ul > li a:focus,
#app-navigation:not(.vue) > ul > li a:active, 
#app-navigation:not(.vue) > ul > li a.selected,
#app-navigation:not(.vue) > ul > li a.active, 
#app-navigation:not(.vue) > ul > li.active > a, 
#app-navigation:not(.vue) > ul > li a:hover > a,
#app-navigation:not(.vue) > ul > li a:focus > a,
#app-navigation:not(.vue) > ul > li a:active > a, 
#app-navigation:not(.vue) > ul > li a.selected > a,
#app-navigation:not(.vue) > ul > li a.active > a {
    opacity: 1;
    box-shadow: inset 4px 0 blue;
}

body{
  background: #1e272e;
}


/* CUSTOM */

.nav-icon-files:before{
    filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
}

<div id="app-navigation">
    <ul class="with-icon">
        <li data-id="files" class="nav-files">
            <a href="#" class="nav-icon-files svg">Files</a>
        </li>
    </ul>
</div>