Question

我有一个路径和一些文本都应用了相同的变换（旋转它们）。然而，文本的角度与路径的角度不匹配。我无法弄清楚为什么？

＆＃13;

    <svg width="600" height="600">
        <path transform="matrix(0.9642053928037905 0.2651564830210419 -0.2651564830210419 0.9642053928037905 121.55313086036932 -84.43174667230568)" style="fill: none;stroke: rgb(0, 0, 0)" d=" M 295.5198888569934,350.25614953846303 L 470.04106495447945,398.2494729652716 L 451.4801111430065,465.74385046153697 L 276.9589350455205,417.75052703472835 Z "></path>

        <text transform="matrix(0.9642053928037905 0.2651564830210419 -0.2651564830210419 0.9642053928037905 121.55313086036932 -84.43174667230568)" x="282.9999999999999" y="390" style="font-family: Arial;font-size: 12;fill: rgb(0, 0, 0);stroke: none">Some Rotated Text</text>
    </svg>

＆＃13;

感谢任何启蒙！

Answer 1

原因是因为矩形首先不是轴对齐的。

如果从两个元素中删除变换，您将看到我的意思。

<svg width="600" height="600">
    <path style="fill: none;stroke: rgb(0, 0, 0)" d=" M 295.5198888569934,350.25614953846303 L 470.04106495447945,398.2494729652716 L 451.4801111430065,465.74385046153697 L 276.9589350455205,417.75052703472835 Z "></path>

    <text x="282.9999999999999" y="390" style="font-family: Arial;font-size: 12;fill: rgb(0, 0, 0);stroke: none">Some Rotated Text</text>
</svg>

Answer 2

矩阵的坐标系随大小和位置的不同而变化（即从一个SVG元素到另一个SVG元素）

您可以使用textPath将文字与路径绑定，并使用translate调整位置。

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <h1>SVG Rotation Weirdness</h1>

  <svg height="600" width="600">
    <path id="textPathShape" transform="matrix(0.9642053928037905 0.2651564830210419 -0.2651564830210419 0.9642053928037905 121.55313086036932 -84.43174667230568)" style="fill: none;stroke: rgb(0, 0, 0)" d=" M 295.5198888569934,350.25614953846303 L 470.04106495447945,398.2494729652716 L 451.4801111430065,465.74385046153697 L 276.9589350455205,417.75052703472835 Z "></path>
    <text style="font-family: Arial;font-size: 12;fill: rgb(0, 0, 0);stroke: none" transform="translate(14 54)">
      <textPath xlink:href="#textPathShape">Rotated Text</textPath>
    </text>
  </svg>

</body>

</html>

＆＃13;

为什么这些SVG旋转不对齐？

2 个答案: