Question

我有一张SVG图表，其中一部分如下所示，

<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>

但是只要我添加旋转变换来旋转文本，文本就会消失并且其位置会发生变化

AppDelegate

http://seleniumhq.github.io/selenium/docs/api/javascript/

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

Answer 1

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

rotate(20, cx, cy)

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

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

旋转元素抛出SVG外部

2 个答案: