从中心文字旋转不准确

时间:2015-08-15 01:03:38

标签: html5 svg

我试图围绕其中心点旋转一些文字,但由于不同字体的字母间距,我无法准确地说明。

当我使用其他自定义字体时,更改更加激烈。示例中的紫色文本是准确的版本。红色的不是。

我必须替换SVG中的现有文本节点,应用用户所做的任何更改(例如旋转和x,y中的更改)。

以下矩阵变换取自基于用户更改的节点I替换。

<g transform="matrix(1 0 0 1 77.9443 50.3945)"></g>

http://jsfiddle.net/6cu01c4o/

根据我的理解,我使用正确的值来计算旋转偏移,所以我对这里发生的事情感到有些困惑。

1 个答案:

答案 0 :(得分:2)

你在这里为自己的生活变得非常困难。

如果您希望文本围绕其中心点旋转,那么第一步就是让文本首先以该点为中心。

使用text-anchor="middle"水平居中文字,dominant-baseline="central"垂直居中。 (实际上,后者可能不会每次都给出完美的结果,具体取决于您使用的特定字体,但在大多数情况下它完全足够。)

简单地猜测一个左对齐文本块的中心坐标不可避免地会给你带来麻烦,因为不同的客户端会有一组不同的安装字体,serif,{{1}的默认值不同等等。

sans-serif