Javascript 为缩放旋转svg元素设置动画
假设我有一个用inkscape制作的svg。 在这个带有viewbox的SVG集合中，我想为SVG中的每个元素设置动画。 翻译或不透明度没有问题。。。但当我需要旋转或缩放单个元素时，它的行为会很奇怪 我试图正确理解viewbox的概念，但我需要一些帮助 我知道当我只有一个视口时，我只有一个原点。我应该设置多个视口吗 //旋转或缩放动作怪异 //旋转或缩放动作怪异 //旋转或缩放动作怪异 我猜你指的是CSS。它与svg文件的中心点相关。然后，您需要计算要设置动画的元素的中心点，该元素与文档的中心点相关。Javascript 为缩放旋转svg元素设置动画,javascript,css,svg,inkscape,anime.js,Javascript,Css,Svg,Inkscape,Anime.js,假设我有一个用inkscape制作的svg。 在这个带有viewbox的SVG集合中，我想为SVG中的每个元素设置动画。 翻译或不透明度没有问题。。。但当我需要旋转或缩放单个元素时，它的行为会很奇怪 我试图正确理解viewbox的概念，但我需要一些帮助 我知道当我只有一个视口时，我只有一个原点。我应该设置多个视口吗 //旋转或缩放动作怪异 //旋转或缩放动作怪异 //旋转或缩放动作怪异 我猜你指的是CSS。它与svg文件的中心点相关。然后，您需要计算要设置动画的元素的中心点，该元素与文档的中心
对于您可以使用的动画。viewBox的基本原理是4个数字是x y宽度高度”。通常x/y坐标为0，将原点保持在左上角。人们经常做的是把原点放在中间。< /P>
为此，将viewBox顶部向左移动一半宽度和一半高度。在您的示例-350-250 700 500中。在Svg中，任何图形的坐标始终具有从Svg画布左上角计算的绝对值。 因此，应用scale 2命令时，地物中心的坐标也将加倍，地物将向右和向下移动 中心150150 中心300300
嗯，也许我可以看看变换框：填充框…旋转和缩放通常需要在执行变换之前进行平移，然后再进行平移，以便变换的对象在发生变化时位于原点。具体而言，对象的中心点应设置为原点。。。有很多方法可以做到这一点，但如果不提供动画代码，就不可能告诉您应该如何操作。@Cedric Gourville如果您想了解有关svg转换和技巧的详细说明，可以查看此链接