Позиционирование многих групп в SVG

Question

Я пытаюсь расположить шкалу с числами и линиями на верхней части моего черного полукруга.Проблема в том, что у меня есть две группы элементов, которые не соответствуют друг другу в одной группе. Таким образом, локальная система координат элемента масштаба расположена внизу, и я не могу использовать функции преобразования, чтобы поместить его в центр..

var r = 400;
var circles = document.querySelectorAll('.circle');
var total_circles = circles.length;
for (var i = 0; i < total_circles; i++) {
  circles[i].setAttribute('r', r);
}

var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = meter_dimension + 'px';
wrapper.style.height = meter_dimension + 'px';

var cf = 2 * Math.PI * r;
var semi_cf = cf / 2;
var z = 40 * Math.PI;
document.querySelector('#outline_ends')
  .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);

for (i = 0; i <= 180; i = i + 10) {
  var new_tick = noon.cloneNode(true);
  new_tick.getElementsByTagName('text')[0].textContent = i;
  new_tick.removeAttribute("id");
  new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
  gauge.appendChild(new_tick);
}

body {
  background-color: grey;
}

#wrapper {
  position: relative;
  margin: auto;
}

#meter {
  width: 100%;
  height: 100%;
  transform: rotateX(180deg);
}

.circle {
  fill: none;
}

#mask {
  stroke: yellow;
  stroke-width: 60;
}

.black {
  fill: none;
  stroke: #000000;
  stroke-width: 30;
}

.range {
  stroke-width: 60;
}

.scale {
  stroke: #ffffff;
}

rect {
  fill: transparent;
}

<div id="wrapper">
  <svg id="meter">
    <g class="scale">                
      <circle id="mask" class="circle" cx="50%" cy="50%">
      </circle>
      <circle id="low" class="black" cx="50%" cy="50%" r="360">
      </circle>
      <circle id="outline_ends" class="circle outline" cx="50%" cy="50%">
      </circle>
        <g id="gauge" transform="rotate(-90)">
          <g id="noon">
            <rect x="-10" y="-220" width="20" height="100" />
            <line x1="0" y1="-190" x2="0" y2="-180" />
            <text x="0" y="-200"></text>
          </g>
        </g>
    </g>
  </svg>
</div>

Answer 1

Это пример расположения группы в SVG: вы помещаете группу в <defs> и повторно используете ее с <use>.Элемент <use> может иметь атрибуты ax и ay, определяющие новую позицию.

svg{border:1px solid; max-height:100vh;}

<svg viewBox="0 0 200 75">
 <defs>
  <g id="g1">
    <rect width="20" height="20" />"
  </g>
  </defs> 
  <use xlink:href ="#g1" x="100" y="50"/>
  <use xlink:href ="#g1" x="50" y="10" fill="red"/>
</svg>

В приведенном выше примере я рисую одну и ту же группу дважды, каждый раз в другой позиции.