Question

当我将transform="rotate(-10.867784481465419)"应用于我的svg-text标记时，它会直观地更改其x和y位置。

with transform =“rotate（0）”

<html>
<body>

<svg height="300" width="200">
  <text x="0" y="175" transform="rotate(0)" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

with transform =“rotate（-10.867784481465419）”

<!DOCTYPE html>
<html>
<body>

<svg height="330" width="200">
  <text x="0" y="175" fill="red" transform="rotate(-10.867784481465419)">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

我怎样才能改变旋转而不是x，y位置。

Answer 1

旋转中心周围会发生任何旋转。那是在（0,0） - SVG的左上角。

如果希望文本围绕SVG中的不同点旋转，则必须指定其他原点。有两种方法可以做到这一点，但最简单的方法是使用rotate()的另一个版本，它需要x和y位置来旋转。

rotate(angle, x, y)

或在您的具体案例中：

rotate(-10.86, 0, 175)

＆＃13;

<!DOCTYPE html>
<html>
<body>

<svg height="330" width="200">
  <text x="0" y="175" fill="red" transform="rotate(-10.86, 0, 175)">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

＆＃13;

Answer 2

您正在围绕原点旋转，但文本不在原点。想象一下，你有一个时钟，其中钟面的中心是原点，而分针是在0,175结束时的一半。 10分钟前，秒针位于右侧，略高于现在的位置，与您的情况相同。

如果要围绕文本的起点旋转，请将其平移到位，然后旋转它。这样，当您旋转文本时，文本就位于本地原点。

<!DOCTYPE html>
<html>
<body>

<svg height="330" width="200">
  <text fill="red" transform="translate(0, 175) rotate(-10.867784481465419)">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

svg text transform-rotate更改文本标记

2 个答案: