gpt4 book ai didi

html - svg text transform-rotate 更改文本标签的 x 和 y 位置

转载 作者:行者123 更新时间:2023-11-28 04:28:02 24 4
gpt4 key购买 nike

当我将 transform="rotate(-10.867784481465419)" 应用到我的 svg-text 标签时,它改变了它的 xy 视觉上的位置。

使用 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 位置。

最佳答案

任何旋转都会围绕旋转中心进行。它位于 (0, 0) - SVG 的左上角。

如果您希望文本围绕 SVG 中的不同点旋转,则必须指定不同的原点。有几种方法可以做到这一点,但最简单的方法是使用另一个版本的 rotate(),它接受一个 xy 要旋转的位置。

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>

关于html - svg text transform-rotate 更改文本标签的 x 和 y 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48260649/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com