旋转SVG外部抛出的元素

Question

我有一个SVG图表，以下是部分内容：

<div>
   <svg class="bullet svg" width="1142" height="63" id="svg0">
      <g transform="translate(144,35)">
         <text transform="translate(10,10)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text>
      </g>
   </svg>
</div>

但是一旦我添加旋转变换来旋转文本，文本就会消失并且位置会改变。

<div>
   <svg class="bullet svg" width="1142" height="63" id="svg0">
      <g transform="translate(144,35) rotate(20)">
         <text transform="translate(10,10) rotate(20)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text>
      </g>
   </svg>
</div>

截图

如何在原位置旋转文本并使其可见？

- Not Known

Answer 1

要使文本围绕其自身中心旋转，请使用：

rotate(20, cx, cy)

cx和cy是文本的位置（包括所有“translates”）。

- Gerardo Furtado

Answer 2

当你执行以下操作时：

<g transform="translate(144,35)">
         <text transform="translate(10,10) rotate (20)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text>
      </g>

它将围绕原点旋转。

因此，您的DOM文本中心将是：

cx = 144 +10 + 869.599;//center x of text DOM..1023.599
cy = 35 +10 + -12.5;//center of y of text DOM..32.5

现在，如果您想围绕TEXT dom的中心旋转，请执行以下操作：

<text transform="translate(10,10) rotate (20 1023 32.5)" ...

这将使文本围绕1023，32.5旋转。

请注意，我忽略了文本宽度，以计算文本DOM的中心位置。

- Cyril Cherian

---

如果OP将"text-anchor"设置为中间，"dominant-baseline"设置为中央，那么您的答案计算将位于文本的中心。 - Gerardo Furtado