Svg在Firefox和Edge上顯示不同

我在中間有一個數字的svg圖像時遇到了一些問題。當使用Chrome瀏覽器和其他瀏覽器時，它顯示正確，但在Firefox和Edge中，數字出現錯誤的位置。 Link Svg在Firefox和Edge上顯示不同

這是我的代碼。

#maindiv { 
    position: relative; 
    width: 50px; 
    height: 50px; 
} 
.number { 
    font-family: initial; 
    font-size: 2.5em; 
    font-weight: 700; 
    text-align: center; 
} 

<div id="maindiv" class="" style=""> 
<svg viewBox="0 -10 50 90" enable-background="new 0 0 50 50"> 
    <defs> 
    <!-- Background image for the svg --> 
    <pattern id="image_594121ec06330" patternUnits="userSpaceOnUse" height="50" width="50" x="0" y="20"> 
     <image x="0" y="0" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://via.placeholder.com/50x50"> 
     </image> 
    </pattern> 

    <!-- two colors for the number --> 
    <linearGradient id="textcolor_594121ec06343" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="50%" stop-color="#ff0100"></stop> 
     <stop offset="50%" stop-color="#0600c4"></stop> 
     <stop offset="50%" stop-color="#0600c4"></stop> 
     <stop offset="0" stop-color="#0600c4"></stop> 
    </linearGradient> 
    </defs> 
    <rect class="cellImage" id="top" x="0" y="20" width="50" height="50" style="" fill="url(#image_594121ec06330)"></rect> 
    <text class="number " x="50%" y="55%" alignment-baseline="middle" text-anchor="middle" fill="url(#textcolor_594121ec06343)">0</text> 
</svg>

這裏是上的jsfiddle https://jsfiddle.net/41s39p63/

相同的代碼，我知道這可以通過固定一些，如果條件改變一些SVG屬性放置在中間的數字，如果用戶在Firefox或Edge上，但我不喜歡使用該解決方案。

有沒有人可以幫我解決這個問題，所以它適用於所有瀏覽器？

來源

2017-06-14 Spock

Firefox不支持對齊基線。您應該能夠使用顯性基線來獲得相同的效果。

來源

2017-06-14 12:51:28

謝謝，它解決了這個問題，但它弄亂了數字的顏色。 – Spock

顯性基線對着色沒有影響。您的漸變停止偏移量不合適，但可能會造成問題。 –

不，主導基線沒有在Edge上工作。 – Spock

Svg在Firefox和Edge上顯示不同

回答

相關問題