Inline在Firefox中拋出的SVG座標系

如果您想查看我正在處理的內容，那麼現在的問題是http://ti.gt/。Inline在Firefox中拋出的SVG座標系

我有SVG渲染菜單按鈕，它使我多麼想在Chrome，Safari瀏覽器，IE9 +，以及他們的移動版本：

enter image description here

在Firefox（包括臺式機&移動），而不是發生這種情況：

enter image description here

它的編碼就像這樣：

<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和它的定位是怎麼回事？我可以修復它嗎？

來源

2014-09-26 Tigt

的[變換上SVGs原點在Firefox（http://stackoverflow.com/questions/24203492/transform-origin-on-svgs-in-firefox） – 2014-09-26 04:30:34

問題是類bar上的transform-origin屬性。應用於SVG元素時，Firefox的transform-origin的實現有問題。

參見：Transform origin on SVGs in Firefox

來源

2014-09-26 04:30:16

通過喬可能重複，所以是。順便提一下，感謝您將它提交給bugzilla！ – Tigt 2014-09-27 23:47:14

那不是我提交的:) – 2014-09-28 01:01:27

呵呵。 [以爲我認識了化身。]（https://bugzilla.mozilla.org/show_bug.cgi?id=923193#c50） – Tigt 2014-09-28 04:32:04

Inline在Firefox中拋出的SVG座標系

回答

相關問題