SVG Axis Labels align inconsistently across browsers

The align of axis labels in svg is based on the alignment-baseline property, which differs across browsers: https://stackoverflow.com/questions/41822995/inconsistent-svg-text-alignment-in-chrome-and-firefox https://stackoverflow.com/questions/19212498/firefox-support-for-alignment-baseline-property

This is due to the specification not permitting alignment-baseline on text elements: https://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty

Therefore, I suggest changing the use of alignment-baseline to dominant-baseline and the valuesbefore-edge to text-before-edges and after-edge to text-after-edge, which appears to resolve the issues for me, but I have not tried to build this from the source.

[plouc]

Contributions are welcome 😃

[mjsarfatti]

Ps: a fast CSS fix in the meantime is the following (not tested in IE though):

text {
  alignment-baseline: baseline !important; /* reset since Chrome wrongfully sees it as valid */
  dominant-baseline: middle;
}

It looks like it won’t work in IE though. So maybe something like the following? (untested as well)

text {
  alignment-baseline: baseline !important; /* reset since Chrome wrongfully sees it as valid */
  position: relative;
  top: Npx; /* will need to be chart-based, manually computed */
}