How to align a text vertically using SVG with cross-browser compatibility?

Mind the following snippet:

<svg style="" width="60" height="60">
    <rect 
        x            = "0"
        y            = "0"
        rx           = "1"
        ry           = "1"
        width        = "17"
        height       = "15"
        fill         = "rgb(254,199,186)"
        stroke       = "rgb(152,119,111)"
        stroke-width = "1">
    </rect>
    <text 
        x                  = "8"
        y                  = "8"
        fill               = "rgb(50,39,37)"
        font-size          = "16"
        font-family        = "monospace"
        alignment-baseline = "middle"
        text-anchor        = "middle">
        a
    </text>
</svg>

Chrome renders that snippet as:

chrome

Whereas on FireFox, this is the result:

firefox

How can I replicate this snippet in a cross-browser compatible manner?


Source: cross-browser

Leave a Reply