SVG文本旋转

Question

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

原定位置：

结果：

预期：

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

如果您希望将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" fill="none" 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 2

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

编辑： x坐标发生变化的原因是因为您在点（100,100）周围旋转而文本位于（70,30）。因此，文本相对于旋转中心在（-30，-70）处，因此在旋转90度之后将是（70，-30）。为什么不以（70,30）为中心旋转？