Сделать дочерний текст повернутого элемента SVG вертикальным

Question

У меня есть элемент SVG, к которому применяется значение transform: rotate(0deg), которое перемещает круг вокруг чего-то еще.Я хотел бы добавить текст в центр круга, но проблема, с которой я сталкиваюсь, заключается в том, что, поскольку круг и текст имеют одно и то же свойство поворота для выравнивания, текст не читается, поскольку его часто переворачивают вверх ногами.

Есть ли способ сделать текст, находящийся внутри круга, всегда в вертикальном положении, не изменяя вручную свойства circle и circle-text css?Есть ли какой-нибудь способ, которым я могу заставить элемент tspan ориентироваться обратно на то, какой браузер по умолчанию является?

svg {
 height: 100%;
 width: 100%;
}

circle {
 transform: rotate(50deg);
}

.circle-text {
 transform: rotate(50deg);
}

.container {
 max-width: 800px;
 height: 800px;
 margin: 0 auto;
}

<div class="container">
 <svg width="200" height="100">
  <circle cx="64.5" cy="0" r="10" fill="#472e12" />
   <text class="circle-text" x="64.5" y="0" text-anchor="middle" fill="#fff">
     <tspan>-30</tspan>
   </text>
 </svg>
</div>

Answer 1

Это мое решение: я помещаю круг и текст в группу: .theg, и я вращаю группу 50deg.Затем я поворачиваю текст -50deg, а также устанавливаю transform-origin:64.5px 0;, т.е. текст вращается вокруг центра круга.

Также я добавил dominant-baseline="middle" к кругу.Я надеюсь, что это то, что вам нужно.

svg {
 width: 100%;
}
.theg{
 transform: rotate(50deg);
}
.circle-text {
 transform-origin:64.5px 0;
 transform: rotate(-50deg);
}

<div class="container">
 <svg viewBox="0 0 200 100">
  <g class="theg">
  <circle cx="64.5" cy="0" r="10" fill="#472e12" />
   <text class="circle-text" x="64.5" y="0" text-anchor="middle" dominant-baseline="middle" fill="#ff0">
     <tspan>-30</tspan>
   </text>
   </g>
 </svg>
</div>