SVG 文本旋转

Question

我有一个带有 textContent“设计”的文本，它用 css 转换为围绕中心 (100,100) 旋转 90 度，因此它垂直显示。 它围绕中心旋转整个坐标系，我希望元素（即“设计”）单独旋转

原位置：

结果：

预期：

SVG：

<svg>
<text x="70" y="30" width="64" height="16" fill="black" transform="rotate(90,100,100)">Design</text>
</svg>

有什么问题？为什么文本元素 x 位置发生了变化？我怎样才能在固定的 x 位置旋转文本？

我想在固定 x 位置旋转文本？

谢谢，

湿婆

Answer 1

原因可能是文本锚在中间，所以 (x, y) 坐标是文本的中心，它围绕其中心旋转。您可以在文本中添加text-anchor="start" 属性，但它不会居中。

编辑： x 坐标发生变化的原因是因为您围绕点 (100, 100) 旋转并且文本位于 (70, 30)。因此，文本相对于旋转中心位于 (-30, -70)，因此旋转 90 度后将位于 (70, -30)。为什么不以 (70, 30) 为中心旋转？

Answer 2

如果您希望 100,100 处的文本旋转 90 度，请尝试以下操作：

<svg>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">Design</text>
</svg>

这比其他选择更直接。

记住transform参数translate和rotate的顺序很重要。

请参阅下面的 sn-p 以了解它如何改变结果。

.translate {
  stroke: green;
  stroke-width: 2;
  fill: none;
  }
  
.rotate {
  stroke: red;
  stroke-width: 2;
  fill: none;
  }
  
.reference {
  stroke: blue;
  border: solid 1px blue;
  }

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <line class="translate" x1="0" x2="100" y1="0" y2="100"/>
  <circle class="rotate" cx="100" cy="100" r="3"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">TR</text>
</svg>

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <path class="rotate" d="M -100 100 A 141.1 141.1 0 0 0 100 100"/>
  <line class="translate" x1="0" x2="-100" y1="0" y2="100"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="rotate(90) translate(100,100)">RT</text>
</svg>

Answer 3

遵循以下 3 个步骤：

1. 将<text> 元素包装在<g> 中。
2. 将<g> 以及<text> 的锚点（此处：实际上是旋转后的文本顶部）移动/翻译到所需位置。
3. 旋转<text>，设置其锚点并不翻译，如下例所示。

小解释：

这个想法是将变换参考点移动到<text>所在的位置，并防止两个变换相互干扰，否则，平移和旋转将在参考中同时应用到“其他地方”的地步——非常难以控制。

<svg>
  <g transform="translate(42, 0)">
     <text
       text-anchor="start"
       transform="rotate(90)"
     >
       Design
    </text>
  </g>
</svg>

或者，如果您希望文本基线位于右侧（更容易阅读）：

<svg>
  <g transform="translate(42, 0)">
    <text
      text-anchor="end"
      transform="rotate(-90)"
    >
      Design
    </text>
  </g>
</svg>