旋转在 SVG 之外抛出的元素答案

【问题标题】：Rotate element thrown outside the SVG旋转在 SVG 之外抛出的元素
【发布时间】：2017-01-29 10:30:53
【问题描述】：

我有一个 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

如何在自己的位置旋转文本并使其可见？

【问题讨论】：

标签： javascript d3.js svg transform

【解决方案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 中心计算的文本宽度。

【讨论】：

如果 OP 将“text-anchor”设置为中间，“dominant-baseline”设置为中心，那么您的答案的计算将正好在文本的中心。

【解决方案2】：

要围绕自己的中心旋转文本，请使用：

rotate(20, cx, cy)

其中cx 和cy 是文本的位置（包括所有“翻译”）。

【讨论】：