CODEWITHSUNDEEP
htmlsvg
crackmigg
crackmigg

Reputation: 5901

Center Text in Circle in rotated SVG

I am trying to show a text in the middle of an rotated SVG circle. The code I have until now is this:

Plunker

<div style="font-size: 11px; font-weight: bold; display: inline-block; width: 38px; height: 38px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);">
    <svg viewBox="0 0 32 32">
        <circle fill="#C6C6C6" stroke="#005EB8" stroke-width="3px" r="14.5" cx="16" cy="16" stroke-dasharray="75 100"></circle>
        <circle fill="#FFF" r="13" cx="16" cy="16"></circle>
        <text style="transform: rotate(90deg); -webkit-transform: rotate(90deg);" fill="#000" x="5" y="-12">75%</text>
    </svg>
</div>

It works well in Chrome and Firefox, but fails in IE 11 and Safari (5.1 Windows). When I change the text nodes x and y coordinates to x="0" y="20" I can see the text on the circle, but it's not rotated.

I would like to understand why the Browsers behave so different on this, and what I can do to get IE and Safari to rotate the text like Chrome and FF do.

Any Ideas?

Upvotes: 1

Views: 1819

Answers (1)

Ian
Ian

Reputation: 13842

Personally I would follow Roberts comment and not use a style. Style transforms and SVGs will head into a world of annoyance :).

<text text-anchor="middle" alignment-baseline="middle" transform="rotate(90,16,16)" fill="#000" x="16" y="16">75%</text>

Use the same center point to rotate around, and also for x,y.

You can also use text-anchor and alignment-baseline to put it in the middle.

As IE doesn't seem to support alignment-baseline="middle", you can adjust the 'y' value of the text element to align as desired, which may be preferable for cross browser support.

plunkr

Upvotes: 3

Related Questions