SVG文本旋转

Question

我有一个textContent为“Design”的文本，通过CSS转换使它绕中心点（100,100）旋转90度，因此垂直显示。它会将整个坐标系绕中心点旋转，但我只想让元素（即“Design”）旋转。

原始位置:

结果:

期望结果:

SVG:

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

问题是什么？为什么文本元素的x位置改变了？如何在固定的X位置旋转文本？

我想要在固定的X位置旋转文本。

谢谢，

Siva

- SivaRajini

Answer 1

如果您想要在位置 100,100 的文本旋转 90 度，则可以尝试以下方法：

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

这比其他选择要简单得多。

请记住，transform 的参数顺序 translate 和 rotate 是有影响的。

查看下面的示例以了解它如何改变结果。

.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>

- Cyrille

Answer 2

按照以下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>

- ellockie

---

这比最佳答案更容易 - smörkex

Answer 3

可能的原因是text-anchor属性设置为middle，所以(x, y)坐标是文本中心点的坐标，文本是围绕中心点旋转的。您可以给文本添加text-anchor="start"属性，但这样文本就不会居中了。

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

- Peter Collingridge

---

最好将文本的（x，y）坐标设置为（0,0），然后进行旋转，再进行平移：transform="rotate(90,100,100) translate(70 30)" - Peter Collingridge