SVG动画围绕其中心旋转组

更新时间：2023-02-02 17:32:26

您还可以通过使用嵌套组来解决使用 transform-origin 的任何浏览器问题。

You can also work around any browser problems with transform-origin by using nested groups.

<g transform="translate(243.35 194.85)">
<g id="Circleelement">
<g transform="translate(-243.35 -194.85)">

这样，CSS轮换就可以在一个以原点为中心的组上进行。因此元素保留在原处。

That way the CSS rotation is working on a group that it thinks is centred on the origin. So the element stays in place.

svg {
	width: 50%;
}

/* Rotate around the circle center */

#Circleelement {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

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

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}





/* _x31_ */
#_x31_, #_x32_7, #_x33_1, #_x31_3 {
   	-webkit-animation: flickerAnimation 3s infinite;
   	-moz-animation: flickerAnimation 3s infinite;
   	-o-animation: flickerAnimation 3s infinite;
    animation: flickerAnimation 3s infinite;
	animation-delay: 0s;
   	-webkit-animation-delay: 0s;
   	-moz-animation-delay: 0s;
   	-o-animation-delay: 0s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x32_ */
#_x32_, #_x32_8, #_x32_3, #_x31_0 {
	animation: flickerAnimation 9s infinite;
   	-webkit-animation: flickerAnimation 9s infinite;
   	-moz-animation: flickerAnimation 9s infinite;
   	-o-animation: flickerAnimation 9s infinite;
   	animation-delay: 0.5s;
   	-webkit-animation-delay: 0.5s;
   	-moz-animation-delay: 0.5s;
   	-o-animation-delay: 0.5s;    
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x3_ */
#_x33_, #_x33_2, #_x32_5, #_x31_7 {
   	-webkit-animation: flickerAnimation 13s infinite;
   	-moz-animation: flickerAnimation 13s infinite;
   	-o-animation: flickerAnimation 13s infinite;
    animation: flickerAnimation 13s infinite;
	animation-delay: 0.75s;
   	-webkit-animation-delay: 0.75s;
   	-moz-animation-delay: 0.75s;
   	-o-animation-delay: 0.75s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x34_ */
#_x34_, #_x32_4, #_x33_6, #_x33_5, #_x31_5 {
   	-webkit-animation: flickerAnimation 23s infinite;
   	-moz-animation: flickerAnimation 23s infinite;
   	-o-animation: flickerAnimation 23s infinite;
    animation: flickerAnimation 23s infinite;
	animation-delay: 0s;
   	-webkit-animation-delay: 0s;
   	-moz-animation-delay: 0s;
   	-o-animation-delay: 0s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x35_ */
#_x35_, #_x32_2, #_x33_0, #_x31_9 {
   	-webkit-animation: flickerAnimation 15s infinite;
   	-moz-animation: flickerAnimation 15s infinite;
   	-o-animation: flickerAnimation 15s infinite;
    animation: flickerAnimation 15s infinite;
	animation-delay: 1s;
   	-webkit-animation-delay: 1s;
   	-moz-animation-delay: 1s;
   	-o-animation-delay: 1s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x36_ */
#_x36_, #_x32_0, #_x32_9, #_x31_1 {
   	-webkit-animation: flickerAnimation 18s infinite;
   	-moz-animation: flickerAnimation 18s infinite;
   	-o-animation: flickerAnimation 18s infinite;
    animation: flickerAnimation 18s infinite;
	animation-delay: 1.5s;
   	-webkit-animation-delay: 1.5s;
   	-moz-animation-delay: 1.5s;
   	-o-animation-delay: 1.5s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x37_ */
#_x37_, #_x33_4, #_x31_2 {
   	-webkit-animation: flickerAnimation 6s infinite;
   	-moz-animation: flickerAnimation 6s infinite;
   	-o-animation: flickerAnimation 6s infinite;
    animation: flickerAnimation 6s infinite;
	animation-delay: 0.5s;
   	-webkit-animation-delay: 0.5s;
   	-moz-animation-delay: 0.5s;
   	-o-animation-delay: 0.5s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x38_ */
#_x38_, #_x32_6, #_x31_6 {
   	-webkit-animation: flickerAnimation 10s infinite;
   	-moz-animation: flickerAnimation 10s infinite;
   	-o-animation: flickerAnimation 10s infinite;
    animation: flickerAnimation 10s infinite;
	animation-delay: 0.2s;
   	-webkit-animation-delay: 0.2s;
   	-moz-animation-delay: 0.2s;
   	-o-animation-delay: 0.2s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x39_ */
#_x39_, #_x33_3, #_x31_4 {
   	-webkit-animation: flickerAnimation 25s infinite;
   	-moz-animation: flickerAnimation 25s infinite;
   	-o-animation: flickerAnimation 25s infinite;
    animation: flickerAnimation 25s infinite;
	animation-delay: 0.8s;
   	-webkit-animation-delay: 0.8s;
   	-moz-animation-delay: 0.8s;
   	-o-animation-delay: 0.8s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

/* _x31_0 */
#_x31_0, #_x32_1, #_x31_8 {
   	-webkit-animation: flickerAnimation 30s infinite;
   	-moz-animation: flickerAnimation 30s infinite;
   	-o-animation: flickerAnimation 30s infinite;
    animation: flickerAnimation 30s infinite;
	animation-delay: 2s;
   	-webkit-animation-delay: 2s;
   	-moz-animation-delay: 2s;
   	-o-animation-delay: 2s; 
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

<body>
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g transform="translate(243.35 194.85)">
<g id="Circleelement">
<g transform="translate(-243.35 -194.85)">
	<circle id="_x31_" fill="#000000" stroke-miterlimit="10" cx="242.5" cy="81.5" r="11.1">  </circle>
	<circle id="_x32_" fill="#000000" stroke-miterlimit="10" cx="277.1" cy="87" r="10.8"/>
	<circle id="_x33_" fill="#000000" stroke-miterlimit="10" cx="307.5" cy="102" r="10.5"/>
	<circle id="_x34_" fill="#000000" stroke-miterlimit="10" cx="332.1" cy="124.9" r="10.2"/>
	<circle id="_x35_" fill="#000000" stroke-miterlimit="10" cx="349.1" cy="154.2" r="9.9"/>
	<circle id="_x36_" fill="#000000" stroke-miterlimit="10" cx="357" cy="188.1" r="9.6"/>
	<circle id="_x37_" fill="#000000" stroke-miterlimit="10" cx="354.3" cy="223.4" r="9.4"/>
	<circle id="_x38_" fill="#000000" stroke-miterlimit="10" cx="341.7" cy="255.1" r="9.1"/>
	<circle id="_x39_" fill="#000000" stroke-miterlimit="10" cx="320.7" cy="281.4" r="8.8"/>
	<circle id="_x31_0" fill="#000000" stroke-miterlimit="10" cx="293.1" cy="300.6" r="8.5"/>
	<circle id="_x31_1" fill="#000000" stroke-miterlimit="10" cx="260.3" cy="311.1" r="8.2"/>
	<circle id="_x31_2" fill="#000000" stroke-miterlimit="10" cx="224.7" cy="311.3" r="7.9"/>
	<circle id="_x31_3" fill="#000000" stroke-miterlimit="10" cx="191.8" cy="301.2" r="7.6"/>
	<circle id="_x31_4" fill="#000000" stroke-miterlimit="10" cx="164" cy="282.3" r="7.3"/>
	<circle id="_x31_5" fill="#000000" stroke-miterlimit="10" cx="142.7" cy="256.3" r="7"/>
	<circle id="_x31_6" fill="#000000" stroke-miterlimit="10" cx="129.7" cy="224.7" r="6.8"/>
	<circle id="_x31_7" fill="#000000" stroke-miterlimit="10" cx="126.6" cy="189.4" r="6.5"/>
	<circle id="_x31_8" fill="#000000" stroke-miterlimit="10" cx="134" cy="155.5" r="6.2"/>
	<circle id="_x31_9" fill="#000000" stroke-miterlimit="10" cx="150.7" cy="126.1" r="5.9"/>
	<circle id="_x32_0" fill="#000000" stroke-miterlimit="10" cx="174.9" cy="102.9" r="5.6"/>
	<circle id="_x32_1" fill="#000000" stroke-miterlimit="10" cx="205.2" cy="87.5" r="5.3"/>
	<circle id="_x32_2" fill="#000000" stroke-miterlimit="10" cx="242.6" cy="123.6" r="10.4"/>
	<circle id="_x32_3" fill="#000000" stroke-miterlimit="10" cx="282.5" cy="136.5" r="9.7"/>
	<circle id="_x32_4" fill="#000000" stroke-miterlimit="10" cx="308.8" cy="168" r="9.1"/>
	<circle id="_x32_5" fill="#000000" stroke-miterlimit="10" cx="314" cy="210.3" r="8.4"/>
	<circle id="_x32_6" fill="#000000" stroke-miterlimit="10" cx="261.1" cy="269.4" r="7.1"/>
	<circle id="_x32_7" fill="#000000" stroke-miterlimit="10" cx="218.3" cy="268.8" r="6.5"/>
	<circle id="_x32_8" fill="#000000" stroke-miterlimit="10" cx="184.1" cy="246.1" r="5.8"/>
	<circle id="_x32_9" fill="#000000" stroke-miterlimit="10" cx="167.1" cy="208.3" r="5.2"/>
	<circle id="_x33_0" fill="#000000" stroke-miterlimit="10" cx="200.5" cy="135.4" r="3.9"/>
	<circle id="_x33_1" fill="#000000" stroke-miterlimit="10" cx="242.2" cy="164.1" r="5.4"/>
	<circle id="_x33_2" fill="#000000" stroke-miterlimit="10" cx="271.9" cy="181.8" r="4.8"/>
	<circle id="_x33_3" fill="#000000" stroke-miterlimit="10" cx="271.5" cy="216.9" r="4.1"/>
	<circle id="_x33_4" fill="#000000" stroke-miterlimit="10" cx="241.3" cy="233.9" r="3.5"/>
	<circle id="_x33_5" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="216.5" r="2.8"/>
	<circle id="_x33_6" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="181.4" r="2.2"/>
</g>
</g>
</g>
<g id="Name">
	<text transform="matrix(1 0 0 1 44 439.7)" font-family="'Gotham-Book'" font-size="54">S O M E T E X T</text>
</g>
</svg>
</body>

上一篇 : ：C / C ++：任何方式得到反射枚举？下一篇 : 旋转UILabel在其中心

SVG动画围绕其中心旋转组

相关阅读

技术问答最新文章