中心轴上的 SVG 旋转答案

【问题标题】：SVG rotation on center axis中心轴上的 SVG 旋转
【发布时间】：2019-04-02 14:57:52
【问题描述】：

我有一个 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>

【问题讨论】：

标签： svg css-animations

【解决方案1】：

在花瓣组上设置transform="translate(-154 -131)" 属性，而不是单个路径。否则，旋转变换将取代平移。
设置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>

【讨论】：