Question

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

我理解这种行为，因为旋转引起坐标的转换。但我想做的是，＆＃39; x＆＃39;并且＆＃39; y＆＃39; position应该始终是text元素的底部。

例如，以下代码将创建50,50

的文本元素

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

现在，（左，下）文本是（50,50）。如果我将它旋转90°，那么（左，上）将是50,50。

因此，对于所有类型的旋转，我都不想改变文本元素的位置。我怎么能这样做？

Answer 1

EDIT

很抱歉我的原始答案如下......我还没有喝第一杯咖啡;）

尝试添加text-anchor =“end”和dy =“1”

IGNORE BELOW

尝试以下方法：

文本旋转属性是指定或接收单个字符旋转值列表的对象。最后一个旋转值将旋转所有后续字符。

myText.setAttribute("rotate","deg1, deg2, deg3, deg4, ...")

 rotationNumbs=myText.getAttribute("rotate")

〜或〜 [NumberList =] myText.rotate [= NumberList]

Answer 2

您可以使用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>

它将使用左上角作为锚点。您可以使用以下方法将其移至中心：

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

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

旋转SVG文本元素的内容

2 个答案: