我使用联SVG与<use>
元件像这样:火狐双打变换值的内联SVG元素
<a href="/">
<svg><use xlink:href="#icon-home"></use></svg>
</a>
在悬停,我必须施加到SVG(为简单起见省略前缀)的变换动画:
a:hover svg {
transform: translateX(10px);
}
这对除Firefox以外的每个浏览器都可以正常工作。而不是移动SVG 10像素它移动20像素。旋转值也是一样。如果旋转设置为180度,Firefox将旋转SVG 360度。
这里有一个Codepen:http://codepen.io/kgrote/pen/ZBKXMO
这仅使用内联SVG元素发生。我认为它与SVG元素有第二个嵌套的<use>
标签有关。
如何让Firefox正确转换内联SVG?这是一个应该报告的Firefox错误吗?
它的工作原理!很好的接收。 – kgrote