logo标签列表

SVG动画：围绕中心旋转的群组

csssvgrotationcentering
9
我有一个包含圆形组和文本组的SVG图片。圆形组由多个点组成。这个圆形组应该围绕其圆心旋转，但它却一直围绕SVG的左上角旋转。我已经到处搜索解决这个问题，但是如果不将圆形组放在完全错误的位置，我无法改变圆形的旋转中心。因此，我的问题是：如何定义SVG图像组的旋转中心而不改变组的位置？以下是我正在使用的代码：https://jsfiddle.net/1pe2c837/1/。 

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 id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)">
 <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 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>

3个回答
11

只需在该元素上使用transform-box: fill-box;，或在所有元素上使用。

3
谢谢！这正是我所需要的缺失部分。我已经应用了 transform-origin: center;，但浏览器围绕整个 SVG 中心旋转，而不是我正在变换的特定组。 - Ted Whitehead
9
你需要设置一个transform-origin。
#Circleelement {
    transform-origin:center;
}

Jsfiddle演示

CSS-Tricks文章

注意：SVG的“原点”基点在不同浏览器中可能会有所不同。上面的示例在Chrome中有效，但在Firefox中可能无效。在SO中有许多与此点相关的问题。

8

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

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

那样做，CSS旋转就作用于一个被认为位于原点中心的组。因此元素保持在原地。 

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>

1
如果您不知道如何获取SVG对象的中心值：在Illustrator中打开SVG，选择元素并打开“转换”面板。在那里，您可以找到SVG的中心（或左侧、右侧角等）值。 - Stefan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接