使用CSS旋转SVG时SVG元素出现灰色背景该如何解决？

• 冗余给激活态下的SVG设置了背景色属性：.input-accordion.open svg 中多余定义了 background-color: rgb(136, 136, 202);，SVG本身默认是透明的，按钮激活时已经设置了对应背景色，两者动画过渡不同步就会出现灰色断层
• 未覆盖按钮元素的浏览器默认点击样式，部分浏览器点击<button>标签时会自带灰色激活高亮

1. 删除.input-accordion.open svg中的背景色属性行
2. 给按钮添加点击态样式规则，覆盖浏览器默认高亮，同时清除移动端点击高亮
3. 可选：删除按钮样式中重复定义的width属性（同时写了300px和400px，仅保留需要的尺寸即可）

.input-accordion{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color:rgb(32, 32, 109) ;
    color: white;
    text-align: left;
    padding-left: 30px;
    outline: none;
    border: 2px solid white;
    transition: 0.3s ease;
    width:400px;
    /* 清除移动端点击高亮 */
    -webkit-tap-highlight-color: transparent;
}
/* 覆盖默认点击态样式 */
.input-accordion:active{
    background-color: rgb(136, 136, 202);
}
.input-accordion.open{
    background-color: rgb(136, 136, 202);
}
.input-accordion.open svg{
    /* 删掉冗余的背景色设置 */
    transform: rotate(180deg);
    transition: 0.3s ease;
}
.input-accordion svg{
    margin-left: 5px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
    transform: scale(90%);
    transition: 0.3s ease;
}
.input-accordion:hover{
    cursor: pointer;
    background-color: rgb(136, 136, 202);
    transition: 0.3s ease;
}

<button class='input-accordion'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>
<br/>
<br/>
<button class='input-accordion open'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>

内容的提问来源于stack exchange，提问作者sweet