Вращение SVG по центральной оси - PullRequest
Новая
       8

Вращение SVG по центральной оси

0 голосов
/ 29 октября 2018

У меня есть 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>

1 Ответ

0 голосов
/ 29 октября 2018

  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>
...