Svg在Firefox和Edge上显示不同 [英] Svg shows different on Firefox and Edge

问题描述

我在中间有一个数字的svg图像有些麻烦。在使用Chrome浏览器和其他浏览器时显示正确，但在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 =maindivclass =style => 
< svg viewBox =0 -10 50 90enable-background =new 0 0 50 50> 
< defs> 
 <！ -   -  svg的背景图像 - > 
< pattern id =image_594121ec06330patternUnits =userSpaceOnUseheight =50width =50x =0y =20> 
 < / image> 
< / pattern> 
 
 <！ - 数字的两种颜色 - > 
< linearGradient id =textcolor_594121ec06343x1 =0％y1 =0％x2 =0％y2 =100％> 
    < / linearGradient> 
< / defs> 
  < / svg> 
  

这里是jsfiddle
https://jsfiddle.net/41s39p63/

我知道这个如果用户使用的是Firefox或Edge，但是我不想使用这个解决方案，那么可以修改一些if-conditions来改变一些svg的属性以将数字放在中间。

有没有人可以帮我解决这个问题，所以它可以在所有浏览器上运行？ 解决方案

Firefox不支持对齐基线。你应该可以使用显性基线来取得相同的效果。

I'm having some trouble with a svg image that has a number in the middle. It shows correct when using Chrome and other browsers but in Firefox and Edge the number gets wrong position. Link

Here is my code.

#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>

And here is the same code on jsfiddle https://jsfiddle.net/41s39p63/

I know this can be fixed by making some if-conditions that changes some svg attributes to place the number in the middle, if the user is on Firefox or Edge but I prefer not to use that solution.

Is there anyone out there who can help me with a solution to this issue so it works on all browsers?

解决方案

Firefox does not support alignment-baseline. You should be able to use dominant-baseline instead to get the same effect.

这篇关于Svg在Firefox和Edge上显示不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！