Internet Explorer和Microsoft Edge中的SVG转换错误

时间:2016-10-21 16:32:11

标签: css internet-explorer svg microsoft-edge

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的问题,其中没有应用转换。

这是一个错误吗?我怎么能避免它?

0 个答案:

没有答案