火狐双打变换值的内联SVG元素

Question

我使用联SVG与<use>元件像这样：

<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错误吗？

Answer 1

我想Firefox会在<svg>的内部看到嵌套的<use>标记作为第二个<svg>。 因此，它是这样的：

<svg> 
    <use xlink:href="#icon-home"> 
     <svg></svg> 
    </use> 
</svg> 

首先，它适用于transform第一svg元素，然后到第二伪SVG。 您可以使用:first-child选择器使所有的工作。这里是工作示例http://codepen.io/anon/pen/xgVGNW。

Answer 2

为什么不直接将<use>标签写为self-closing tag。然后，它会工作的跨浏览器：

<use xlink:href="#icon-home" /> 

像这样：

<a href="/"> 
    <svg><use xlink:href="#icon-home" /></svg> 
</a> 

见W3C规范为<use>

https://www.w3.org/TR/SVG11/struct.html#UseElement

见MDN（Mozilla开发者网络）<use>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use