SVG 文本旋转

Question

我有一个带有 textContent "Design" 的文本，它被 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

请按照以下 3 个步骤操作：

\n

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

\n

小解释：

\n

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

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 2

如果您想要100,100旋转90度数的文本，请尝试以下操作：

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

这比替代方案更直接。

请记住，该命令的的transform参数，translate并且rotate，问题。

请参阅下面的片段以了解它如何改变结果。

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

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

Answer 3

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

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