javascript - 旋转 SVG 文本元素的内容

Question

我正在努力旋转 SVG 文本元素中的文本。当使用 transform:rotate(angle,x,y) 执行旋转时，整个文本元素都会旋转。这会产生一个问题，即文本元素的定位将被修改。

我理解这种行为，因为旋转会导致坐标转换。但我想要做的是，'x' 和 'y' 位置应始终位于文本元素的底部。

例如，下面的代码将在 50, 50 处创建一个文本元素

<text x='50' y='50'>My Text </text>

现在，文本的 (left, bottom) 是 (50, 50)。如果我将它旋转 90，则 (left, top) 将是 50, 50。

因此，对于各种旋转，我不想更改文本元素的位置。我该怎么做？

Answer 1

您可以使用 text-anchor 将文本锚定在不同的位置。例如，如果您像这样旋转文本:

<text id="mytext" x='50' y='50'>My Text 
  <animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" 
                    from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
</text>

它将使用左上角作为 anchor 。您可以使用以下方法将其移动到中心:

<text id="mytext" x='50' y='50' text-anchor="middle">My Text 
  <animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" 
                    from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
</text>

现在它会旋转锚定在中心:看这个 JSFiddle .

如果这不是您想要的，您可能还想尝试其他 anchor 和基线属性。请参阅:SVG Spec - 10 Text - 10.9 Alignment properties