SVG中image的CSS旋转动画
1.在jsx中引入图片的引用地址
const fun2 = require('@/assets/fun2.png')
2.创建包含图片的<g>元素，创建g元素的作用主要是图像在画布上的偏移，等引用CSS样式的时候旋转就会以这个偏移点为圆心，否则会以画布零点为圆心旋转，就不是想要的效果了
const poolimg = pool.append('g')
.attr('id', 'poolimg')
.attr('transform', 'translate(600,350)')
3.创建图像元素<image>, 'transform-box'属性设置成 'fill-box'，
poolimg.append('image')
.attr('id', 'path0')
.attr('class', 'move0')
.attr('width', 100).attr('height', 100)
.attr('preserveAspectRatio', 'xMidYMid meet') //这只图像的平铺样式
.attr('xlink:href', fun2)
.attr('transform-box', 'fill-box')
4. 设置CSS动画属性，设置好样式，图像就可以旋转了， transform-origin: 50px 50px; 这是旋转中心在基点偏移的位置
.move0 {
transform-origin: 50px 50px;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.static {
width: 100px;
height: 100px;
background: red;
position: relative;
}
@keyframes myfirst {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
/* background: red; */
/* left: 600; top: 350; */
transform: rotate(360deg);
}
}
