使用 css 围绕中心文本位置旋转 svg 文本

Question

我想对 SVG 中的一组元素应用单个 css 旋转变换，这样每个元素都独立旋转，而不必计算 [=36= 中每个元素的中心].比如我有一个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>

另一个解决方案（受 Robert Longson 的评论启发）将旋转文本包装在 g 元素中并翻译 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>

使用 css 围绕中心文本位置旋转 svg 文本

Rotate svg text around central text position using css

css

svg

overwrite

rotation