Javascript SVG css背景图像以不同颜色淡入SVG悬停

我只想为图标使用一个div和一个css选择器

目前，我有两个不同的背景图像正在加载工作

小提琴：

html

---

为什么使用base64而不是内联svg？然后，您可以在悬停状态下使用CSS更改笔划属性，使用SVG作为背景图像，使其像光栅一样工作。使用光栅似乎相当困难，因此使用SVG与使用背景图像一样困难。

<h1>Hover over the icon</h1>
<div class="icon bell"></div>

body {
    padding: 50px;
}

.icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
    background-size: 40px 40px;
    height: 40px;
    width: 40px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;    
}

.icon:hover {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
    background-size: 40px 40px;
    height: 40px;
    width: 40px;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}