CODEWITHSUNDEEP
csssvg
drake035
drake035

Reputation: 2897

How to center text inside an svg element on Firefox?

Inside my svg element I have this text element:

<text alignment-baseline="middle" text-anchor="middle">

This vertically centers the element on Chrome but it fails on Firefox: https://jsfiddle.net/g398ajc0/1/

How to make it work everywhere?

(also is there any way to move it a few pixels around if the font isn't well aligned? Margin or top/bottom don't seem to work)

Upvotes: 1

Views: 390

Answers (1)

dannyzolp
dannyzolp

Reputation: 41

So according to the Mozilla docs, "alignment-baseline" and "text-anchor" aren't officially supported in the tag, so you will have to use x and y positions instead. (Link)

So what I found that seemed to look the best was this:

<svg viewBox="-20,-20,40,40" class="progress-ring">
    <circle r="20" class="progress-ring-circle"></circle>
    <path d="M0,-20 A20,20,0,0,1,6.180339887498949,-19.02113032590307" 
    class="progress-ring-ring" style="stroke: rgb(255, 0, 0);"></path>
    <text dx="-4" dy="5"> 1 </text>
</svg>

Though, you could probably mess around a little more to get it completely centered the way you want it.

Upvotes: 1

Related Questions