Как вращать элемент SVG, не влияя на текст внутри него

Question

Поверните SVG, чтобы запустить анимацию загрузчика сверху.но он вращает текст внутри него. Как вращать только SVG-путь вместе, чтобы не влиять на текст внутри него.

пытался добавить поворот по отдельности к пути.В этом случае оба пути не выровнены как окружность

<svg class="loader" id="loader-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" />
    <path class="meter" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" stroke-dasharray="316.6" stroke-dashoffset="316.6" />
   <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">00:00</text>
</svg>

Ожидается: поверните SVG для запуска загрузчика сверху, не влияя на текст. Факт: загрузчик SVG запускается с 3-часовой позиции часов и текст выровнен правильно

Answer 1

Текст не зависит от поворота.Я вращаю <path class="meter", используя:

transform="rotate(-90,56.69720697402954,57.07850170135498 )"

Это означает, что я вращаю путь на 90 градусов назад.Центр вращения: x:56.69720697402954, y:57.07850170135498

Центр вращения является центром пути SVG.Чтобы получить значения, я использую javascript: сначала я получаю ограничивающую рамку пути:

let bb = thePath.getBBox();

затем я использую ограничивающую рамку для вычисления центра;

let center_x = bb.x + bb.width/2;
let center_y = bb.y + bb.height/2;

svg{border:1px solid; width:90vh;}

<svg class="loader" id="loader-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12; stroke:#ccc;stroke-opacity:1" />
    <path class="meter"  d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1;stroke:gold " stroke-dasharray="317" stroke-dashoffset="300" transform="rotate(-90,56.69720697402954,57.07850170135498 )" />
   <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">00:00</text>
</svg>

В качестве альтернативы вы можете повернуть элемент svg -90deg, а затем повернуть текст назад:

#loader-svg{transform:rotate(-90deg);  transform-origin: 50% 50%;}
#progress-text{transform:rotate(90deg); transform-origin: 50% 50%;}