在Firefox中抛出内联SVG坐标系

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>已经喝醉了。我已经了解了属性大小调整，CSS大小调整，viewBox，preserveAspectRatio以及其他明显的方法，但Firefox中的任何更改都预示着其他地方的破坏。

Firefox及其定位是怎么回事？我能解决吗？

Answer 1

问题是类transform-origin上的bar属性。当应用于SVG元素时，Firefox的transform-origin实现是错误的。

请参阅：Transform origin on SVGs in Firefox