SVG在中心轴上旋转

Question

我有一个SVG图形，应该可以做成一朵花，花瓣会淡入并按时间间隔旋转。发生的事情是，花瓣不会在花朵中间的圆心上旋转。启用动画效果时，花瓣向左移动，而不是在其起源处旋转和渐隐，而是在中心的圆圈后面。

我已经尝试了以下代码，但无济于事，包括transform-origin：center，但是没有用。我缺少什么？

		/* ROTATE ANIMATION */
		@-webkit-keyframes rotateIn {
			from {-webkit-transform: rotate(0deg);}
			to {-webkit-transform: rotate(140deg);}
		}

		@-moz-keyframes rotateIn {
			from {-moz-transform: rotate(0deg);}
			to {-moz-transform: rotate(140deg);}
		}

		@keyframes rotateIn {
			from {opacity: 0; transform: rotate(0deg);}
			to {opacity: 0.5; transform: rotate(140deg);}
		}
    
    /* ANIMATE PETALS */
 		path[id^="petal"]{
 			 opacity: 0;
			 -moz-transform: rotate(0deg);
			 -webkit-transform: rotate(0deg);
			 transform: rotate(0deg);

 			-moz-transform-origin: center;
 			-webkit-transform-origin: center;
 			transform-origin: center;
			 
			-webkit-animation:rotateIn ease-in 1;
			-moz-animation:rotateIn ease-in 1;
			animation:rotateIn ease-in 1;
			
			-webkit-animation-fill-mode:forwards;
			-moz-animation-fill-mode:forwards;
			animation-fill-mode:forwards;

			-webkit-animation-duration:0.5s;
			-moz-animation-duration:0.5s;
			animation-duration:0.5s;
			
		}
    
    #petal1 {
      		-webkit-animation-delay: 0.8s;
			-moz-animation-delay: 0.8s;
			animation-delay: 0.8s;
    }
    
    #petal1 {
     -webkit-animation-delay: 0.2s;
			-moz-animation-delay: 0.2s;
			animation-delay: 0.2s;
    }
    
    #petal2 {
     -webkit-animation-delay: 0.4s;
			-moz-animation-delay: 0.4s;
			animation-delay: 0.4s;
    }
    
    #petal3 {
     -webkit-animation-delay: 0.6s;
			-moz-animation-delay: 0.6s;
			animation-delay: 0.6s;
    }
    
    #petal4 {
     -webkit-animation-delay: 0.8s;
			-moz-animation-delay: 0.8s;
			animation-delay: 0.8s;
    }

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1504 750">
    <title>PETAL_BG-03</title>
    <g id="PETALS">
        <path id="petal1" d="M770,736.76c-29.27-69.28-25-172.9,18-275.52S901.75,282.87,971.65,255.12c29.27,69.28,25,172.9-18,275.53S839.85,709,770,736.76Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal2" d="M836.94,413.32c103.06-41.93,206.72-45.14,275.7-15.17-28.47,69.61-104.92,139.68-208,181.61S697.94,624.9,629,594.93C657.43,525.32,733.88,455.25,836.94,413.32Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal3" d="M1110.91,599.28c-69.49,28.78-173.07,23.78-275.4-19.91S658,464.3,630.69,394.2c69.49-28.78,173.07-23.78,275.39,19.92S1083.65,529.18,1110.91,599.28Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal4" d="M968.79,738.94c-69.57-28.58-139.51-105.15-181.27-208.28s-44.8-206.79-14.71-275.72c69.57,28.58,139.51,105.15,181.27,208.28S998.87,670,968.79,738.94Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
    </g>
   
         <g id="CENTER">
        <circle id="centercircle" cx="716.8" cy="365.34" r="108.5" style="fill:#725400;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
    </g>
</svg>

Answer 1

1. transform="translate(-154 -131)"在“花瓣”组上而不是单个路径上设置属性。否则，旋转变换将替换平移。

2. 设置transform-box: fill-box以澄清与之相关的内容transform-origin: center。

/* ROTATE ANIMATION */
@keyframes rotateIn {
    from {opacity: 0; transform: rotate(0deg);}
    to {opacity: 0.5; transform: rotate(140deg);}
}
        
/* ANIMATE PETALS */
path[id^="petal"]{
    opacity: 0;
    transform: rotate(0deg);
    transform-origin: center;
    transform-box: fill-box;
    animation:rotateIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:0.5s;
}

#petal1 {
    animation-delay: 0.2s;
}

#petal2 {
    animation-delay: 0.4s;
}

#petal3 {
    animation-delay: 0.6s;
}

#petal4 {
    animation-delay: 0.8s;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1504 750">
    <title>PETAL_BG-03</title>
    <g id="PETALS" transform="translate(-154 -131)">
        <path id="petal1" d="M770,736.76c-29.27-69.28-25-172.9,18-275.52S901.75,282.87,971.65,255.12c29.27,69.28,25,172.9-18,275.53S839.85,709,770,736.76Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal2" d="M836.94,413.32c103.06-41.93,206.72-45.14,275.7-15.17-28.47,69.61-104.92,139.68-208,181.61S697.94,624.9,629,594.93C657.43,525.32,733.88,455.25,836.94,413.32Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal3" d="M1110.91,599.28c-69.49,28.78-173.07,23.78-275.4-19.91S658,464.3,630.69,394.2c69.49-28.78,173.07-23.78,275.39,19.92S1083.65,529.18,1110.91,599.28Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
        <path id="petal4" d="M968.79,738.94c-69.57-28.58-139.51-105.15-181.27-208.28s-44.8-206.79-14.71-275.72c69.57,28.58,139.51,105.15,181.27,208.28S998.87,670,968.79,738.94Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
        />
    </g>
   
    <g id="CENTER">
        <circle id="centercircle" cx="716.8" cy="365.34" r="108.5" style="fill:#725400;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
    </g>
</svg>