javascript - 旋转抛出 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>

Screenshot

我怎样才能在自己的位置旋转文本并使其可见？

Answer 1

当你这样做时:

<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 中心计算的文本宽度。