Skip to content Skip to sidebar Skip to footer

Dominant-baseline Doesn't Work In Firefox

Consider the following example: Chrome respects dominant-baseline: central by aligning the text vertically in the middle: But, Firefox doesn't seem to respect dominant-baseline:

Solution 1:

In the SVG 1.1 specification dominant-baseline is not an inherited property. SVG 2 changes things such that dominant-baseline is inherited. Firefox only implemented that SVG 2 feature in version 70. I.e. after this question was originally written.

In the meantime simply set dominant-baseline on the text element.

g {
  transform: translate(50px, 50px);
  text-anchor: middle;
}
text {
  dominant-baseline: middle;
}
<svgwidth="100"height="100"><g><circlecx="0"cy="0"r="15"stroke="#000"fill="#ffffff" /><textx="0"y="0">A</text></g></svg>

Post a Comment for "Dominant-baseline Doesn't Work In Firefox"