Ошибка преобразования SVG в Internet Explorer и Microsoft Edge

Question

https://jsfiddle.net/68uehzmu/

У меня есть svg, состоящий из двух путей:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="close" viewBox="0 0 24 24">
<title>Close</title>
<path class="close_leftarrow" d="M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"></path>
<path class="close_rightarrow" d="M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z"></path>
</symbol>
</defs>
</svg>

Со следующим CSS:

.close_leftarrow {
    -webkit-transform: translate(3px,.5px);
    -moz-transform: translate(3px,.5px);
    -o-transform: translate(3px,.5px);
    -ms-transform: translate(3px,.5px);
    transform: translate(3px,.5px);
}
.close_rightarrow {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -o-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
}

У меня есть ссылка на это в документе:

<svg class="close"><use xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#close"></use></svg>

У меня проблема с Internet Explorer и Edge, где преобразования не применяются.

Это ошибка? Как я могу избежать этого?