SVG中image的CSS旋转动画

SVG中image的CSS旋转动画

1.在jsx中引入图片的引用地址

const fun2 = require('@/assets/fun2.png')

2.创建包含图片的元素，创建g元素的作用主要是图像在画布上的偏移，等引用CSS样式的时候旋转就会以这个偏移点为圆心，否则会以画布零点为圆心旋转，就不是想要的效果了

const poolimg = pool.append('g')

      .attr('id', 'poolimg')      

       .attr('transform', 'translate(600,350)')

3.创建图像元素,  '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);

    }

}