文字从中心旋转不准确

debugcn 发表于 Dev

马辛

我正在尝试围绕其中心点旋转一些文本，但是由于不同字体中的字母间距，我无法做到准确。

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

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

以下矩阵转换是根据用户的更改从我要替换的节点上获取的。

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

http://jsfiddle.net/6cu01c4o/

据我了解，我正在使用适当的值来计算旋转偏移量，因此我对这里发生的事情有些困惑。

r3mainer

您在这里让自己的生活变得非常困难。

如果要使文本围绕其中心点旋转，那么第一步最好是使文本居中于该点的中心。

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

简单地猜测左对齐文本块的中心坐标不可避免地要你陷入麻烦，因为不同的客户会有不同的一组安装的字体，并为不同的默认值serif，sans-serif等等。

<svg width="300" height="100" viewBox="0 0 300 100">
  <g font-size="29">
    <g transform="translate(50 50)" font-family="sans-serif">
      <text text-anchor="middle" dominant-baseline="central">TEST</text>
      <text text-anchor="middle" dominant-baseline="central" transform="rotate(90)">TEST</text>
    </g>
    <g transform="translate(150 50)" font-family="serif">
      <text text-anchor="middle" dominant-baseline="central">TEST</text>
      <text text-anchor="middle" dominant-baseline="central" transform="rotate(90)">TEST</text>
    </g>
    <g transform="translate(250 50)" font-family="monospace">
      <text text-anchor="middle" dominant-baseline="central">TEST</text>
      <text text-anchor="middle" dominant-baseline="central" transform="rotate(90)">TEST</text>
    </g>
  </g>
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。