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的问题,其中没有应用转换。
这是一个错误吗?我怎么能避免它?