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

Question

我想对SVG中的一组元素进行单一的css旋转变换，使每个元素独立旋转，而不需要在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>

然而，另一个解决方案（受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>