Как центрировать текст относительно группы, а не всей области SVG?

Что у меня не так?) хочу центрировать текст по группе, а не по всему svg.

js:

const ns = 'http://www.w3.org/2000/svg'
...
generateTextBlock(c, e) {
  const g = document.createElementNS(ns, 'g')
  g.setAttributeNS(null, 'id', e._id)

  const circle = document.createElementNS(ns, 'circle')
  circle.setAttributeNS(null, 'cx', c.x + 30)
  circle.setAttributeNS(null, 'cy', c.y + 30)
  circle.setAttributeNS(null, 'r', 30)
  circle.setAttributeNS(null, 'fill', '#f06')

  const text = document.createElementNS(ns, 'text')
  text.setAttributeNS(null, 'x', '50%')
  text.setAttributeNS(null, 'y', '50%')
  text.setAttributeNS(null, 'alignment-baseline', 'middle')
  text.setAttributeNS(null, 'text-anchor', 'middle')
  text.appendChild(document.createTextNode(e.label))

  g.appendChild(circle)
  g.appendChild(text)
  return g
},

html:

<svg
  :id="`${constructorId}-svg-area`"
  viewBox="0 0 400 550"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- dynamic generate -->
</svg>