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度。

这仅适用于内联SVG元素。我认为它与具有第二个嵌套<use>标签的SVG元素有关。

如何让Firefox正确转换内联SVG？这是一个应该报告的Firefox错误吗？

Answer 1

我认为Firefox会在<use>内看到嵌套的<svg>标记为第二个<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>

请参阅<use>

的W3C规范

请参阅MDN（Mozilla开发人员网络）<use>