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;
}
<svg width="100" height="100">
<g>
<circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />
<text x="0" y="0">A</text>
</g>
</svg>
Post a Comment for "Dominant-baseline Doesn't Work In Firefox"