css - Firefox 将内联 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 度。

这是一个代码笔:http://codepen.io/kgrote/pen/ZBKXMO

这只发生在行内 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 .