svg子元素绕自身中心点运动的实现方法

马黑黑 · 发表于 2024-9-16 11:57

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

svg坐标系以svg画布左上角{0,0}为中心，且svg画布内的所有元素也以此为中心。这意味着，如果svg内的元素做transform形变或运动，例如伸缩或旋转，它不会在原地进行，而是伸缩或旋转的同时还环绕svg画布左上角做一定距离的圆周运动。试从以下例子加以领会，点击矩形它就会做旋转运动（随后的例子都是通过点击子元素触发动画）：

如何能让svg里的各种元素能像CSS所实现的那样，都是以元素自身的中心点作为运动中心？

方法一：给出元素在svg画布中元素中心点坐标

下面的代码，在前例基础上修改了animateTransform动画中的from和to属性，加入了矩形自己的中心点相对于svg画布的坐标值：

from和to属性值都是3个数值，第一个是要旋转的角度，第二、三个是矩形中心点在svg画布中的坐标。例中矩形中心点恰好和svg画布的中心点重合，如果不是呢？试看：

从上例可以看出，只要给出元素中心点在svg画布上的坐标值，元素就能在原地旋转（或做其他transform形变），不论其身居何处。

方法二：使用viewBox视窗坐标系+简单处理元素位置

svg画布是一个特殊的画布，理论上它是无限大的，我们通过svg标签的width和height属性设定了它的物理宽高尺寸，这样svg画布就和我们现实生活中的画布一样了。但是，svg还可以设定一个viewBox属性，即视窗，用来设置画布中的可视区域，属性值四个，前两个是视窗坐标起始值，后两个是宽高。前面的示例，viewBox与物理画布重合，而以下例子，我们将 viewBox 的坐标系往左、上各移动100，这样viewBox视窗的中心恰好处在svg物理画布的左上角，此时，矩形的x设为左移到自身宽度的一半、y值上移高度的一半，最终元素在viewBox视窗中呈现出来的就在画布（实际上是viewBox视窗）的中心并能在原地旋转：

方法三：借助CSS通过transform-box和transform-origin改变元素运动中心

svg基于XML，XML和HTML同宗，故而，svg能够接受CSS设置，甚至自身的一些特有属性也可以使用CSS方法设置。我们可以通过CSS的style属性设置svg子元素的transform*属性以实现我们的需求，其中：transform-box用于定义元素的布局框，值为fill-box时指以自身的边框为包装盒边框；transform-origin大家应该熟悉，用来定义运动中心，值为center时等同于{50%,50%}，表示运动原点在中心。二者结合起来使用，svg里的元素就和HTML元素一样绕自己的中心点做运动，不论它们在画布中的什么位置：