So I have a gauge chart with some text in the middle. The main group is translated in relation to its parent so it will be centered. I can't figure out how to get the .center and .onlineText to line up correctly like the image. Code snippet is below.

[![enter image description here](https://i.stack.imgur.com/OALE4.png)](https://i.stack.imgur.com/OALE4.png)

```html
<svg _ngcontent-c30="" class="gauge" id="gauge-AgentStatus" width="100%" height="100%" viewBox="0 20 424 250" preserveAspectRatio="xMidYMid meet"><defs _ngcontent-c30=""><linearGradient _ngcontent-c30="" id="mainGradient" x1="0%" x2="100%" y1="0%" y2="100%"><stop _ngcontent-c30="" class="start" offset="0%" stop-color="white" stop-opacity="1"></stop><stop _ngcontent-c30="" class="end" offset="100%" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(212,125)"><g class="backPath"><path class="backPathArc" d="M103.55887361070263,47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,-103.55887361070263,-47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,103.55887361070263,47.394500828980114M34.57216181750291,76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,-34.57216181750291,-76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,34.57216181750291,76.4337053025479Z" fill="gray"></path></g><g class="frontPath"><path class="frontPathArc" d="M11.36991689588878,-113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,-11.36991689588878,113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,11.36991689588878,-113.31991882333071M9.777183295791342,-83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,-9.777183295791342,83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,9.777183295791342,-83.31717929582616Z" fill="url(#mainGradient)"></path></g><g class="center"><text class="centerText" alignment-baseline="hanging" text-anchor="end" fill="#4d4d4d" style="font-size: 80px;">100</text><text class="percentText" alignment-baseline="hanging" text-anchor="start" fill="#4d4d4d" style="font-size: 30px;">%</text></g><g class="onlineText"><text class="percentText" alignment-baseline="baseline" fill="#4d4d4d" dy=".35em" style="font-size: 20px;">ONLINE</text></g></g></svg>
```