Поверните текст SVG вокруг центральной позиции текста, используя css

Question

Я хочу применить одно преобразование вращения css к набору элементов в SVG, так что каждый элемент вращается независимо, без необходимости вычислять центр каждого элемента в css. Например, у меня есть SVG, который выглядит как на картинке слева, и я хочу применить css для достижения эффекта справа

Я сам пишу svg и создаю что-то вроде этого

<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(50 100)" text-anchor="middle">Text 1</text>
    <text transform="translate(100 100)" text-anchor="middle">Text 2</text>
</svg>

Когда я применяю вращение css, например, вставляя <style>text {transform: rotate(10deg)}</style>, оно кажется, перезаписывает первое преобразование, и повернутый текст помещается в верхний левый угол:

Я могу изменить svg, чтобы использовать `x = «X» y = «Y» вместо атрибута преобразования, но это приводит к тому, что преобразование применяется вокруг другого центра:

<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
    <style>text {transform: rotate(10deg)}</style>
    <text x="50" y="100" text-anchor="middle">Text 1</text>
    <text x="100" y="100"  text-anchor="middle">Text 2</text>
</svg>

Как я могу структурировать svg так, чтобы я мог применять вращение, которое работает независимо для каждого элемента без перезаписи исходного преобразования?

Answer 1

Это возможное решение:

-Текст имеет x = "0" y = "0" и поворачивается с CSS.

-Вы помещаете текст в <defs>.

-Вы используете текст, а элемент <use> имеет необходимые значения x и y.

text{transform:rotate(90deg)}

<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
  <text id="a" text-anchor="middle" >Text 1</text>
  <text id="b" text-anchor="middle" >Text 2</text>
  </defs>
  <use xlink:href="#a" x="50" y="50" />
  <use xlink:href="#b" x="100" y="50" />
</svg>

Еще одно решение (вдохновленное комментарием Роберта Лонгсона) заключалось бы в том, чтобы обернуть повернутый текст в элемент ag и перевести g

text{transform:rotate(90deg)}

<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 
      <g transform="translate(50,50)"><text text-anchor="middle" >Text 1</text></g>
      <g transform="translate(100,50)"><text text-anchor="middle" >Text 2</text></g>

 </svg>