logo标签列表

SVG文本变换-旋转会改变文本标签的X和Y位置

htmlcsssvg
4
当我将transform="rotate(-10.867784481465419)"应用于我的svg-text标签时，它在视觉上改变了其x和y位置。 使用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>

带有 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>

enter image description here

如何仅更改旋转而不是x、y位置。
2个回答
10
任何旋转都将围绕旋转中心发生。这个中心位于SVG的左上角(0,0)。
如果您希望文本围绕SVG中的其他点旋转，则必须指定不同的原点。有几种方法可以实现，但最简单的方式是使用另一种版本的rotate()，它需要一个x和y位置来进行旋转。
rotate(angle, x, y)

或者在您的具体情况下：
rotate(-10.86, 0, 175)


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

5
你正在以原点为中心旋转，但文本不在原点上。想象一下你有一个时钟，时钟表盘的中心是原点，分针指向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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接