Css 在SVG中定位多个组

我正试图在我的黑色半圆规顶部放置一个带有数字和线条的刻度。问题是，在同一组中，有两组元素彼此不匹配。。因此，比例元素的局部坐标系位于底部，我无法使用变换函数将其放置在中心

var r=400；
var circles=document.querySelectorAll（'.circle'）；
var total_circles=circles.length；
对于（var i=0；i<总圈数；i++）{
圆[i].setAttribute（'r'，r）；
}
var仪表_尺寸=（r*2）+100；
var wrapper=document.querySelector（“#wrapper”）；
wrapper.style.width=米_尺寸+px；
wrapper.style.height=米_尺寸+px；
var cf=2*Math.PI*r；
var semi_cf=cf/2；
var z=40*Math.PI；
document.querySelector（“#大纲_结尾”）
.setAttribute（'stroke-dasharray'，2+'，'+（semi_cf-2））-
document.querySelector（“#mask”）
.setAttribute（'stroke-dasharray'，semi_cf+'，'+cf）；
document.querySelector（“#low”）
.setAttribute（'stroke-dasharray'，semi_cf-z+'，'+cf）；
对于（i=0；i，这是在SVG中定位组的示例：
将组放入
中，然后将其与
一起重用。
元素可能具有定义新位置的x和y属性


svg{边框：1px实心；最大高度：100vh；}

"
你能显示一个想要的结果吗？请让它更清楚？我试图避免硬编码的坐标设置，更喜欢使用宽度、高度百分比值使其动态。例如，我避免使用viewBox。但是在这种情况下，我想我必须做一个例外。不，你不必。在上面的代码中，你可以替换
viewBox=“0 0 200 75”
带有
width=“200”height=“75”