内联 SVG 的坐标系在 Firefox 中被抛弃

Question

如果你想看看我正在处理什么，现在问题就在http://ti.gt/。

我有一个用 SVG 呈现的菜单按钮，它在 Chrome、Safari、IE9+ 及其移动版本中呈现我想要的效果：

在 Firefox（桌面版和移动版）中，会发生这种情况：

它是这样编码的：

<a href="/menu" class="menu-link" id="menuLink" aria-label="Navigation">
    <svg viewBox="0 0 160 160">
        <polygon points="160,168 0,168 60,60 160,0"/>
        <polygon class="bar bar1" points="60,90 150,85 147,60 65,65" fill="#fff"/>
        <polygon class="bar bar2" points="45,125 147,120 150,100 57,100" fill="#fff"/>
        <polygon class="bar bar3" points="45,152 150,150 155,132 50,135" fill="#fff"/>
    </svg>
</a>

用于设置样式的 CSS：

.menu-link {
    background: none;
    position: fixed;
    right: -2px;
    bottom: -2px;
    width: 100px;
    height: 100px;
    display: block;
    z-index: 10;
}

（它故意延伸到浏览器边缘以帮助position: fixed 在移动设备上出现一些抖动。）

提供背景的主要<path> 似乎是相同的，但提供酒吧的<path>s 已经喝醉了。我已经对属性大小、CSS 大小、viewBox、preserveAspectRatio 和其他明显的方法感到困惑，但 Firefox 的任何变化都预示着其他地方的破坏。

Firefox 及其定位是怎么回事？我可以解决它吗？

Answer 1

问题是bar 类的transform-origin 属性。 Firefox 对 transform-origin 的实现在应用于 SVG 元素时存在问题。

见：Transform origin on SVGs in Firefox