svg text transform-rotate 改变文本标签的 x 和 y 位置
当我申请transform="rotate(-10.867784481465419)"到我的svg-text标签，它改变了x和y视觉位置。
随着变换=“旋转（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>使用变换=“旋转（-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 位置。
您正在绕原点旋转，但文本不在原点。想象一下，您有一个时钟，其钟面中心为原点，分针位于结束于 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>任何旋转都将围绕旋转中心发生。那是 (0, 0) - SVG 的左上角。
如果您希望文本围绕 SVG 中的不同点旋转，则必须指定不同的原点。有几种方法可以做到这一点，但最简单的方法是使用另一个版本，rotate()它需要一个x和y位置来旋转。
rotate(angle, x, y)
或在您的特定情况下：
rotate(-10.86, 0, 175)
rotate(angle, x, y)