Firefox 将内联 SVG 元素的变换值加倍答案

【问题标题】：Firefox Doubles Transform Values on Inline SVG ElementsFirefox 将内联 SVG 元素的变换值加倍
【发布时间】：2017-04-07 00:11:44
【问题描述】：

我正在使用带有 <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 度。

这只发生在内联 SVG 元素中。我认为这与具有第二个嵌套 <use> 标记的 SVG 元素有关。

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

【问题讨论】：

【解决方案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。

【讨论】：

【解决方案2】：

为什么不把<use> 标签写成self-closing tag。然后它将跨浏览器工作：

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

像这样：

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

请参阅 W3C 规范以了解 <use>

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

【讨论】：

你在什么操作系统上测试过这个？我在 Firefox 50.1.0 中的 Windows 10 上进行了测试，我看到它是动画的。你在 Mac 上使用 Firefox 吗？谢谢！
是的，OSX 10.11.6 上的 FF 49.0.1。
如果需要，您可以向 Mozilla Bugzilla 报告此问题，以便他们修复它。bugzilla.mozilla.org :)