马黑PHP整站系统

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

位置: 首页 > 前端三套件[ 发布时间: 2024.9.16  作者: 马黑  阅读: 135 ]

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元素一样绕自己的中心点做运动,不论它们在画布中的什么位置:

前一篇: 实现元素的拖曳和点击两种功能操作互不干扰
下一篇: 让svg内部元素运行CSS动画

发表评论:

       

评论列表 [2条]

#2 | 知名不具 于 2024-9-17 23:32 发布: 非常详细的讲解。学习了!

#1 | 小白 于 2024-9-17 09:34 发布: 幻想那贴的时候,我改变了大小,旋转就乱套了。。整了半天也没让它按中心点转。。。这贴老师一下子给了三种方法。细读理解中。。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com