Chrome和Firefox中的SVG文本对齐方式不一致

我正在Leaflet.js地图上绘制SVG标记图标.图标代表气象站,它们根据风向旋转并显示平均风速作为叠加.

我已经能够在Chrome中按照需要运行此功能,但Firefox中的文本位置已关闭.

左边是Chrome(55.0.2883.95),右边是Firefox(50.0.1).

这是Leaflet.Icon我正在使用的自定义类:

window.RemoteWind = window.RemoteWind || {};

// This uses Chroma.js to build a color scale which is used for wind speed.
// http://gka.github.io/chroma.js
RemoteWind.color_scale = chroma.scale([
  'lightblue',
  'green',
  'red',
  'purple'
])
.mode('hsl') // the blending mode
.domain([0, 7, 15, 25]); // the distinct steps for each.

RemoteWind.VectorIcon = L.Icon.extend({
  options: {
    height: 26,
    width: 26,
    stroke: 'white',
    strokeWidth: 2,
    circle: {
      cx: 13,
      cy: 13,
      r: 13
    }
  },
  _createSVG: function(){
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttributeNS(null, 'version', '1.1')
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
    svg.setAttribute('height', this.options.height);
    svg.setAttribute('width',  this.options.width);
    return svg;
  }
});

/*
* Vector based icon for a station
*/
RemoteWind.StationIcon = RemoteWind.VectorIcon.extend({
  options: {
    className: 'leaflet-station-icon active',
    speed: 0,
    direction: 0,
    path: {
      d: "M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13 S26,26.2,26,19z"
    }
  },
  createIcon: function (oldIcon) {
    var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'),
    svg = this._createSVG(),
    g = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
    txt_g = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
    options = this.options,
    path,
    txt;

    g.setAttributeNS(null, "transform", "translate(0,-6)");

    path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttributeNS(null, 'd', "M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13 S26,26.2,26,19z");
    path.setAttributeNS(null, 'stroke', this.options.stroke);
    path.setAttributeNS(null, 'stroke-width', this.options.strokeWidth);
    path.setAttributeNS(null, 'fill', RemoteWind.color_scale(options.speed).name() );
    path.setAttributeNS(null, 'transform', 'rotate(% 13 19)'.replace('%', options.direction));

    txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.innerHTML = Math.round(options.speed).toString();
    txt.setAttributeNS(null, 'fill', 'white');
    txt.setAttributeNS(null, 'x', this.options.height / 2);
    txt.setAttributeNS(null, 'y', this.options.width / 2);
    txt.setAttributeNS(null, 'text-anchor', 'middle');
    txt.setAttributeNS(null, 'alignment-baseline', 'central');

    g.appendChild(path);
    txt_g.appendChild(txt);
    svg.appendChild(g);
    svg.appendChild(txt_g);
    div.appendChild(svg);
    this._setIconStyles(div, 'icon');
    return div;
  },

  createShadow: function () {
    return null;
  }
});

RemoteWind.stationIcon = function (options) {
  return new RemoteWind.StationIcon(options);
};

我通过设置text-anchor="middle"和alignment-baseline="central"加上x和y坐标来定位文本.

这是添加标记时在DOM中创建的HTML:

为什么firefox没有正确定位文本？

Firefox目前不支持alignment-baseline.它确实支持dominant-baseline,对于您的用例来说几乎相同.