svg :active в ie 11

Здравствуйте, появился следующий вопрос про использование svg в ie 11, дело в том, что в интенсивах(один из которых я прошёл, правда с опозданием и без наставника) вы говорите, что правильнее svg вставлять прямо в html код… Тогда можно задать свг элементу класс, и через css управлять, например, цветом изображения(свойство fill: #цвет) и это работает
.cart:hover .cart-icon-fill,
.cart:focus .cart-icon-fill,
.bookmark:hover .bookmark-icon-fill,
.bookmark:focus .bookmark-icon-fill {
fill: #ffffff;
}

.cart:active .cart-icon-fill,
.bookmark:active .bookmark-icon-fill {
fill: #8b8e94;
}

не корректно работает только псевдокласс :active в ie11 - если кликнуть ровно по иконке или тексту внутри ссылки, то :active не срабатывает, правда если кликнуть по остальным частям ссылки, то всё работает…
никто не может подсказать, как обойти этот баг, ведь согласно требованиям вёрстка должна быть корректной во ВСЕХ современных браузерах…

Может пригодится:
.cart {
display: block;
position: relative;
}
.cart:before {
content: “”;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
}