SVG 和 CSS 重力动画
SVG and CSS gravity animation
我想在一个 svg 文件中用几个球制作重力效果。
我不使用 JS，我使用这个 fiddle http://jsfiddle.net/BYossarian/Frg74/2/ 作为指导。
#container {
margin: 10px;
width: 100px;
height: 550px;
border-bottom: 1px solid black;
position: relative;
}
.ball {
background: rgb(0, 187, 187);
width: 50px;
height: 50px;
border-radius: 50px;
position: absolute;
left: 40px;
top: 0;
}
.bouncing {
-webkit-animation: bounce 1.5s infinite;
-moz-animation: bounce 1.5s infinite;
-o-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
}
@-webkit-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@-moz-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@-o-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
<div id="container">
<div class="ball bouncing"></div>
</div>
现在我在这里，我无法移动任何球，我也不知道为什么。 https://jsfiddle.net/kostakos14/Lj97aguL/
SVG 和 HTML 具有不同的坐标系。您应该使用 CSS 属性 transform。转换参考 here.
此外，除非您想变形这些路径，否则您应该使用 SVG 圆形标记来减少代码。
很可能您需要使用 javascript 在您的元素之间设置 animation-delay，否则将难以维护。
有像 GreenSock and Snap 这样非常好的库，可以使处理 SVG 动画时的事情变得更容易。
这是一个简单的演示，一次演示了所有动画。
DEMO
#Balls path {
-webkit-animation: bounce 1.5s infinite;
-moz-animation: bounce 1.5s infinite;
-o-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
@keyframes bounce {
50% {
transform: translateY(500px);
}
75% {
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
100% {
transform: translateY(0);
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="273.649px" height="331.081px" viewBox="0 0 273.649 331.081" enable-background="new 0 0 273.649 331.081" xml:space="preserve">
<g id="GoT">
<path d="M98.766,84.481v8.241L97.7,93.46c-0.041,0-0.041,0-0.082,0.041c-0.041,0.041-0.123,0.082-0.164,0.082
c-0.041,0.041-0.082,0.082-0.123,0.082c-0.041,0.041-0.082,0.082-0.164,0.082c-0.041,0.041-0.082,0.082-0.164,0.123
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.082,0.041-0.123,0.082c-0.082,0.041-0.123,0.041-0.205,0.082
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.123,0.082-0.205,0.082c-0.041,0.041-0.041,0.041-0.082,0.082c-0.041,0-0.041,0-0.082,0
c-0.041,0.041-0.123,0.082-0.205,0.123s-0.205,0.082-0.287,0.123c0,0,0,0-0.041,0.041c-1.722,0.779-3.526,1.189-5.453,1.312
c0,0,0,0-0.041,0c-0.082,0-0.205,0-0.328,0h-0.041c-0.123,0-0.246,0-0.369,0c-1.64,0-3.28-0.246-4.797-0.779
c-0.041,0-0.041,0-0.041,0c-0.164-0.041-0.287-0.123-0.451-0.164c-0.205-0.082-0.41-0.164-0.615-0.246
c-0.533-0.205-1.025-0.451-1.476-0.738c-1.23-0.656-2.378-1.517-3.362-2.542c-1.394-1.394-2.501-2.993-3.28-4.838
c-0.574-1.394-0.984-2.87-1.107-4.387c-0.041-0.492-0.082-1.025-0.082-1.517c0-0.246,0-0.533,0-0.779
c0.123-1.763,0.492-3.526,1.189-5.166c0.779-1.804,1.886-3.444,3.28-4.838s2.993-2.501,4.838-3.239
c1.845-0.82,3.854-1.189,5.904-1.189c0.123,0,0.246,0,0.369,0h0.041c0.123,0,0.246,0,0.328,0c0.041,0,0.041,0,0.041,0
c0.123,0,0.246,0,0.369,0.041c1.763,0.123,3.485,0.533,5.125,1.271c0,0,0,0.041,0.041,0.041c0.082,0.041,0.164,0.082,0.246,0.123
c0.041,0,0.041,0,0.041,0v5.617c-0.615-0.533-1.312-0.943-2.05-1.312c-0.615-0.287-1.271-0.533-1.886-0.697
c-0.041,0-0.082,0-0.123-0.041c-0.041,0-0.082,0-0.123,0c-0.041-0.041-0.082-0.041-0.164-0.041c0,0-0.041,0-0.082-0.041
c-0.164-0.041-0.369-0.041-0.533-0.082c-0.041,0-0.041,0-0.082,0s-0.123-0.041-0.164-0.041s-0.041,0-0.082,0s-0.123,0-0.164-0.041
c-0.041,0-0.082,0-0.123,0c-0.082,0-0.164,0-0.246,0c-0.041,0-0.082-0.041-0.123-0.041s-0.082,0-0.123,0s-0.123,0-0.164,0
s-0.082,0-0.082,0c-0.082,0-0.205,0-0.287,0c-1.927,0-3.772,0.492-5.371,1.476c-0.041,0.041-0.123,0.082-0.205,0.123
c-0.656,0.41-1.271,0.902-1.804,1.476c-0.164,0.164-0.369,0.328-0.533,0.533c0,0,0,0.041-0.041,0.041
c-0.205,0.246-0.369,0.492-0.533,0.738c-0.041,0.041-0.082,0.082-0.082,0.082c-0.082,0.123-0.164,0.246-0.246,0.369
c-0.041,0.041-0.082,0.123-0.082,0.164c-0.615,0.984-1.025,2.009-1.271,3.116c-0.041,0.041-0.041,0.041-0.041,0.082
c-0.082,0.41-0.164,0.82-0.205,1.23c0,0.164,0,0.328,0,0.451c-0.041,0.205-0.041,0.369-0.041,0.574c0,0.164,0,0.328,0.041,0.533
c0.041,0.779,0.164,1.558,0.369,2.296c0.492,1.722,1.394,3.28,2.665,4.551c1.968,1.968,4.592,3.075,7.38,3.075
c0.082,0,0.205,0,0.287,0c0.041,0,0.082,0,0.123-0.041c0.041,0,0.123,0,0.164,0s0.082,0,0.123,0s0.082,0,0.123,0
c0.082,0,0.123,0,0.205,0c0-0.041,0.041-0.041,0.082-0.041s0.123,0,0.164,0s0.041,0,0.082,0c0.287-0.041,0.615-0.123,0.902-0.164
c0.041,0,0.041,0,0.082-0.041c0.041,0,0.123,0,0.164-0.041c0.041,0,0.082,0,0.123,0c0.041-0.041,0.082-0.041,0.123-0.041
c0.041-0.041,0.123-0.041,0.164-0.041s0.082-0.041,0.082-0.041c0.574-0.164,1.148-0.369,1.681-0.656c0,0,0,0,0.041,0v-5.617h-5.74
v-4.305h10.496V84.481z" />
<path d="M125.662,95.961h-5.371l-7.667-10.291h-3.485v10.291h-4.756V65.539h4.018h5.002c4.018,0,6.355,1.64,7.585,3.034
c1.599,1.763,2.46,4.223,2.46,7.052c0,2.788-0.861,5.248-2.46,7.011c-0.738,0.82-1.886,1.763-3.526,2.337L125.662,95.961z
M113.403,81.406c1.968,0,3.444-0.574,4.387-1.64c1.148-1.23,1.353-2.952,1.353-4.141c0-1.23-0.205-2.952-1.353-4.182
c-0.943-1.066-2.419-1.599-4.387-1.599h-4.264v11.562H113.403z" />
<path d="M146.531,89.442h-10.824l-2.583,6.519h-5.248l13.243-31.816l13.202,31.816h-5.207L146.531,89.442z M144.809,85.178
l-3.69-9.266l-3.69,9.266H144.809z" />
<path d="M163.135,85.588l7.995-20.049h5.166l-13.038,31.775l-13.94-31.775h5.248L163.135,85.588z" />
<path d="M180.519,95.961V65.539h4.756v30.422H180.519z" />
<path d="M211.145,69.803h-8.363v26.158h-4.798V69.803h-8.363v-4.264h21.524V69.803z" />
<path d="M228.858,80.053v15.908h-4.756V80.053l-10.701-14.514h5.125l7.954,10.824l7.954-10.824h5.084L228.858,80.053z" />
<path d="M195.402,143.972c-1.846-0.779-3.444-1.886-4.839-3.28c-1.394-1.394-2.501-2.993-3.279-4.838
c-0.779-1.845-1.189-3.854-1.189-5.904c0-2.05,0.41-4.059,1.189-5.945c0.778-1.804,1.886-3.403,3.279-4.838
c1.395-1.394,2.993-2.46,4.839-3.239c1.845-0.779,3.854-1.189,5.903-1.189c2.051,0,4.06,0.41,5.945,1.189
c1.804,0.779,3.403,1.845,4.838,3.239c1.395,1.435,2.46,3.034,3.239,4.838c0.779,1.886,1.189,3.895,1.189,5.945
c0,2.05-0.41,4.059-1.189,5.904s-1.845,3.444-3.239,4.838c-1.435,1.394-3.034,2.501-4.838,3.28
c-1.886,0.779-3.895,1.189-5.945,1.189C199.255,145.161,197.247,144.751,195.402,143.972z M193.925,122.57
c-1.968,1.968-3.075,4.592-3.075,7.38c0,2.788,1.107,5.412,3.075,7.38c1.968,1.968,4.592,3.075,7.38,3.075s5.412-1.107,7.381-3.075
c1.968-1.968,3.074-4.592,3.074-7.38c0-2.788-1.106-5.412-3.074-7.38c-1.969-1.968-4.593-3.075-7.381-3.075
S195.893,120.602,193.925,122.57z" />
<path d="M226.643,127.121h11.111v4.305h-11.111v13.735h-4.756v-30.422h4.715h13.571v4.264h-13.53V127.121z" />
<path d="M47.022,168.203h-8.364v26.158h-4.797v-26.158h-8.364v-4.264h21.525V168.203z" />
<path d="M73.057,194.361h-4.756v-13.12H56.165v13.12h-4.756v-30.422h4.756v12.997h12.136v-12.997h4.756V194.361z" />
<path d="M87.734,193.172c-1.845-0.779-3.444-1.886-4.838-3.28s-2.501-2.993-3.28-4.838c-0.779-1.845-1.189-3.854-1.189-5.904
c0-2.05,0.41-4.059,1.189-5.945c0.779-1.804,1.886-3.403,3.28-4.838c1.394-1.394,2.993-2.46,4.838-3.239
c1.845-0.779,3.854-1.189,5.904-1.189c2.05,0,4.059,0.41,5.945,1.189c1.804,0.779,3.403,1.845,4.838,3.239
c1.394,1.435,2.46,3.034,3.239,4.838c0.779,1.886,1.189,3.895,1.189,5.945c0,2.05-0.41,4.059-1.189,5.904s-1.845,3.444-3.239,4.838
c-1.435,1.394-3.034,2.501-4.838,3.28c-1.886,0.779-3.895,1.189-5.945,1.189C91.588,194.361,89.58,193.951,87.734,193.172z
M86.258,171.77c-1.968,1.968-3.075,4.592-3.075,7.38c0,2.788,1.107,5.412,3.075,7.38c1.968,1.968,4.592,3.075,7.38,3.075
s5.412-1.107,7.38-3.075c1.968-1.968,3.075-4.592,3.075-7.38c0-2.788-1.107-5.412-3.075-7.38c-1.968-1.968-4.592-3.075-7.38-3.075
S88.227,169.802,86.258,171.77z" />
<path d="M117.378,191.942c-1.189-0.902-2.091-2.009-2.706-3.28c-0.697-1.394-1.025-2.952-1.025-4.633v-20.09h4.756v20.09
c0,1.804,0.656,3.198,1.886,4.141c1.148,0.902,2.829,1.435,4.633,1.435c1.763,0,3.444-0.533,4.633-1.435
c1.23-0.943,1.845-2.337,1.845-4.141v-20.09h4.797v20.09c0,1.681-0.369,3.239-1.025,4.633c-0.656,1.271-1.558,2.378-2.706,3.28
c-2.009,1.558-4.674,2.419-7.544,2.419S119.387,193.5,117.378,191.942z" />
<path d="M165.758,182.881v8.241l-1.066,0.738c-0.041,0-0.041,0-0.082,0.041s-0.123,0.082-0.164,0.082
c-0.041,0.041-0.082,0.082-0.123,0.082c-0.041,0.041-0.082,0.082-0.164,0.082c-0.041,0.041-0.082,0.082-0.164,0.123
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.082,0.041-0.123,0.082c-0.082,0.041-0.123,0.041-0.205,0.082
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.123,0.082-0.205,0.082c-0.041,0.041-0.041,0.041-0.082,0.082c-0.041,0-0.041,0-0.082,0
c-0.041,0.041-0.123,0.082-0.205,0.123s-0.205,0.082-0.287,0.123c0,0,0,0-0.041,0.041c-1.722,0.779-3.525,1.189-5.453,1.312
c0,0,0,0-0.041,0c-0.082,0-0.205,0-0.327,0h-0.041c-0.123,0-0.246,0-0.369,0c-1.64,0-3.28-0.246-4.797-0.779
c-0.041,0-0.041,0-0.041,0c-0.164-0.041-0.287-0.123-0.451-0.164c-0.205-0.082-0.41-0.164-0.615-0.246
c-0.533-0.205-1.025-0.451-1.476-0.738c-1.23-0.656-2.378-1.517-3.362-2.542c-1.394-1.394-2.501-2.993-3.28-4.838
c-0.574-1.394-0.984-2.87-1.107-4.387c-0.041-0.492-0.082-1.025-0.082-1.517c0-0.246,0-0.533,0-0.779
c0.123-1.763,0.492-3.526,1.189-5.166c0.779-1.804,1.886-3.444,3.28-4.838s2.993-2.501,4.838-3.239
c1.845-0.82,3.854-1.189,5.904-1.189c0.123,0,0.246,0,0.369,0h0.041c0.122,0,0.245,0,0.327,0c0.041,0,0.041,0,0.041,0
c0.123,0,0.246,0,0.369,0.041c1.764,0.123,3.485,0.533,5.125,1.271c0,0,0,0.041,0.041,0.041c0.082,0.041,0.164,0.082,0.246,0.123
c0.041,0,0.041,0,0.041,0v5.617c-0.615-0.533-1.312-0.943-2.05-1.312c-0.614-0.287-1.271-0.533-1.886-0.697
c-0.041,0-0.082,0-0.123-0.041c-0.041,0-0.082,0-0.123,0c-0.041-0.041-0.082-0.041-0.164-0.041c0,0-0.041,0-0.082-0.041
c-0.164-0.041-0.369-0.041-0.533-0.082c-0.041,0-0.041,0-0.082,0s-0.123-0.041-0.164-0.041s-0.041,0-0.082,0s-0.123,0-0.164-0.041
c-0.041,0-0.082,0-0.123,0c-0.082,0-0.164,0-0.246,0c-0.041,0-0.082-0.041-0.123-0.041s-0.082,0-0.123,0c-0.04,0-0.122,0-0.163,0
s-0.082,0-0.082,0c-0.082,0-0.205,0-0.287,0c-1.927,0-3.772,0.492-5.371,1.476c-0.041,0.041-0.123,0.082-0.205,0.123
c-0.656,0.41-1.271,0.902-1.804,1.476c-0.164,0.164-0.369,0.328-0.533,0.533c0,0,0,0.041-0.041,0.041
c-0.205,0.246-0.369,0.492-0.533,0.738c-0.041,0.041-0.082,0.082-0.082,0.082c-0.082,0.123-0.164,0.246-0.246,0.369
c-0.041,0.041-0.082,0.123-0.082,0.164c-0.615,0.984-1.025,2.009-1.271,3.116c-0.041,0.041-0.041,0.041-0.041,0.082
c-0.082,0.41-0.164,0.82-0.205,1.23c0,0.164,0,0.328,0,0.451c-0.041,0.205-0.041,0.369-0.041,0.574c0,0.164,0,0.328,0.041,0.533
c0.041,0.779,0.164,1.558,0.369,2.296c0.492,1.722,1.394,3.28,2.665,4.551c1.968,1.968,4.592,3.075,7.38,3.075
c0.082,0,0.205,0,0.287,0c0.041,0,0.082,0,0.123-0.041c0.041,0,0.122,0,0.163,0s0.082,0,0.123,0s0.082,0,0.123,0
c0.082,0,0.123,0,0.205,0c0-0.041,0.041-0.041,0.082-0.041s0.123,0,0.164,0s0.041,0,0.082,0c0.287-0.041,0.615-0.123,0.902-0.164
c0.041,0,0.041,0,0.082-0.041c0.041,0,0.123,0,0.164-0.041c0.041,0,0.082,0,0.123,0c0.041-0.041,0.082-0.041,0.123-0.041
c0.041-0.041,0.123-0.041,0.164-0.041s0.082-0.041,0.082-0.041c0.574-0.164,1.148-0.369,1.681-0.656c0,0,0,0,0.041,0v-5.617h-5.739
v-4.305h10.496V182.881z" />
<path d="M192.408,194.361h-4.756v-13.12h-12.136v13.12h-4.756v-30.422h4.756v12.997h12.136v-12.997h4.756V194.361z" />
<path d="M218.32,168.203h-8.363v26.158h-4.798v-26.158h-8.363v-4.264h21.524V168.203z" />
<path d="M238.206,188.252c-0.861,2.952-3.526,5.289-6.848,5.945c-0.615,0.123-1.229,0.164-1.845,0.164
c-1.23,0-2.46-0.205-3.608-0.656c-1.927-0.779-3.607-2.05-5.043-3.895l3.772-2.952c0.86,1.148,1.886,1.968,2.993,2.378
c0.901,0.369,1.886,0.451,2.788,0.246c1.558-0.287,2.829-1.312,3.197-2.542c0.41-1.394-0.532-2.624-1.394-3.444
c-1.354-1.271-3.567-3.444-3.731-3.608l-3.73-3.526c-1.148-1.107-1.927-2.337-2.337-3.649c-0.41-1.271-0.451-2.624-0.082-3.854
c0.369-1.312,1.147-2.46,2.255-3.403c1.024-0.861,2.296-1.476,3.648-1.722c1.477-0.328,3.034-0.205,4.511,0.328
c1.558,0.615,2.952,1.64,4.141,3.075l-3.73,2.993c-1.559-1.886-3.157-1.886-4.019-1.722c-1.065,0.205-1.968,0.902-2.214,1.763
c-0.164,0.574-0.123,1.517,1.148,2.747l5.084,4.879c0.737,0.738,1.64,1.599,2.296,2.214c1.312,1.189,2.214,2.542,2.665,3.977
C238.575,185.382,238.615,186.858,238.206,188.252z" />
</g>
<g id="Balls">
<path id="a" fill="#ECE0DB" d="M146.425,249.886c-14.506-1.662-24.877-14.398-23.161-28.447
c1.717-14.05,14.868-24.095,29.375-22.432c14.506,1.662,24.877,14.396,23.159,28.447
C174.083,241.504,160.932,251.548,146.425,249.886" />
<path id="t" fill="#00A69C" d="M220.91,207.845c-9.208,0-16.67-7.462-16.67-16.668c0-9.208,7.462-16.671,16.67-16.671
c9.206,0,16.668,7.463,16.668,16.671C237.578,200.383,230.116,207.845,220.91,207.845" />
<path id="s" fill="#00A69C" d="M165.229,151.194c10.115,0,18.314,8.2,18.314,18.315c0,10.114-8.199,18.315-18.314,18.315
c-10.116,0-18.316-8.201-18.316-18.315C146.913,159.394,155.113,151.194,165.229,151.194" />
<path id="o" fill="#6F3B91" d="M99.768,197.281c-10.801,0-19.555-8.754-19.555-19.555c0-10.798,8.754-19.554,19.555-19.554
c10.799,0,19.554,8.755,19.554,19.554C119.321,188.527,110.566,197.281,99.768,197.281" />
<path id="k" fill="#D52147" d="M194.754,146.1c10.205,0,18.478,8.272,18.478,18.477c0,10.205-8.272,18.478-18.478,18.478
s-18.478-8.272-18.478-18.478C176.277,154.372,184.549,146.1,194.754,146.1" />
<path id="quatre" fill="#6F3B91" d="M38.281,197.957c-11.921,0-21.582-9.51-21.582-21.245c0-11.731,9.661-21.243,21.582-21.243
c11.918,0,21.581,9.512,21.581,21.243C59.861,188.447,50.199,197.957,38.281,197.957" />
<path id="troi" fill="#D52147" d="M147.885,99.437c-8.662,0-15.686-7.021-15.686-15.686c0-8.662,7.023-15.687,15.686-15.687
c8.664,0,15.686,7.025,15.686,15.687C163.571,92.415,156.549,99.437,147.885,99.437" />
<path id="de" fill="#ECE0DB" d="M227.045,99.284c-11.293,0-20.448-9.155-20.448-20.448c0-11.293,9.155-20.447,20.448-20.447
c11.289,0,20.445,9.154,20.445,20.447C247.491,90.129,238.334,99.284,227.045,99.284" />
<path id="un" fill="#ECE0DB" d="M160.153,108.068c-8.307,0-15.042-6.734-15.042-15.042c0-8.308,6.735-15.042,15.042-15.042
c8.305,0,15.041,6.734,15.041,15.042C175.194,101.333,168.458,108.068,160.153,108.068" />
<path id="deka" fill="#D52147" d="M85.27,245.01c-17.683,0-32.017-14.334-32.017-32.019c0-17.681,14.334-32.014,32.017-32.014
s32.018,14.333,32.018,32.014C117.288,230.676,102.953,245.01,85.27,245.01" />
<path id="ennia" fill="#D52147" d="M226.617,146.477c-10.126,0-18.332-8.206-18.332-18.331c0-10.123,8.206-18.333,18.332-18.333
c10.123,0,18.329,8.209,18.329,18.333C244.946,138.271,236.74,146.477,226.617,146.477" />
<path id="oxtw" fill="#D52147" d="M127.629,282.499c-9.777,0-17.704-7.926-17.704-17.705s7.927-17.703,17.704-17.703
c9.776,0,17.704,7.924,17.704,17.703S137.405,282.499,127.629,282.499" />
<path id="efta" fill="#D02F3A" d="M70.654,187.673c-7.572,0-13.712-6.139-13.712-13.71s6.141-13.707,13.712-13.707
c7.571,0,13.71,6.136,13.71,13.707S78.225,187.673,70.654,187.673" />
<path id="exi" fill="#00A69C" d="M115.905,306.296c-8.19,0-14.827-6.641-14.827-14.828s6.637-14.824,14.827-14.824
c8.189,0,14.827,6.637,14.827,14.824S124.094,306.296,115.905,306.296" />
<path id="pente" fill="#D52147" d="M193.616,248.896c-8.662,0-15.686-7.021-15.686-15.686c0-8.662,7.023-15.687,15.686-15.687
c8.664,0,15.686,7.024,15.686,15.687C209.301,241.875,202.28,248.896,193.616,248.896" />
<path id="tessera" fill="#ECE0DB" d="M223.907,194.617c-10.992,0-19.903-8.91-19.903-19.903c0-10.992,8.911-19.901,19.903-19.901
c10.988,0,19.899,8.909,19.899,19.901C243.806,185.708,234.895,194.617,223.907,194.617" />
<path id="twelve" fill="#6F3B91" d="M167.47,155.362c-10.801,0-19.555-8.754-19.555-19.555c0-10.798,8.754-19.554,19.555-19.554
c10.799,0,19.554,8.755,19.554,19.554C187.024,146.608,178.269,155.362,167.47,155.362" />
<path id="eleven" fill="#00A69C" d="M204.036,154.376c-7.715,0-13.967-6.253-13.967-13.966c0-7.715,6.252-13.968,13.967-13.968
c7.714,0,13.966,6.253,13.966,13.968C218.001,148.124,211.75,154.376,204.036,154.376" />
<path id="ten" fill="#5D2D7B" d="M187.704,140.605c-13.067,0-23.657-10.591-23.657-23.656c0-13.063,10.59-23.654,23.654-23.654
c13.066,0,23.657,10.591,23.657,23.654C211.358,130.014,200.767,140.605,187.704,140.605" />
<path id="nine" fill="#D52147" d="M140.718,132.57c-11.986,0-21.701-9.716-21.701-21.702c0-11.985,9.715-21.701,21.701-21.701
c11.987,0,21.704,9.716,21.704,21.701C162.421,122.854,152.705,132.57,140.718,132.57" />
<path id="eight" fill="#ECE0DB" d="M137.28,206.233c-13.354,0-24.18-10.825-24.18-24.179c0-13.357,10.825-24.182,24.18-24.182
s24.178,10.825,24.178,24.182C161.458,195.408,150.634,206.233,137.28,206.233" />
<path id="seven" fill="#D52147" d="M185.741,132.35c-6.469,0-11.712-5.242-11.712-11.71c0-6.467,5.243-11.71,11.712-11.71
c6.466,0,11.71,5.243,11.71,11.71C197.451,127.108,192.207,132.35,185.741,132.35" />
<path id="six" fill="#00A69C" d="M100.649,219.161c14.715,0,26.644,11.928,26.644,26.643c0,14.717-11.928,26.646-26.644,26.646
c-14.716,0-26.645-11.93-26.645-26.646C74.004,231.089,85.933,219.161,100.649,219.161" />
<path id="five" fill="#00A69C" d="M58.25,176.817c5.579,0,10.099,4.524,10.099,10.099c0,5.58-4.52,10.103-10.099,10.103
c-5.576,0-10.098-4.522-10.098-10.103C48.152,181.341,52.674,176.817,58.25,176.817" />
<path id="four" fill="#D52147" d="M101.76,110.733c17.109,0,30.979,13.868,30.979,30.977s-13.87,30.978-30.979,30.978
c-17.108,0-30.977-13.869-30.977-30.978S84.651,110.733,101.76,110.733" />
<path id="three" fill="#00A69C" d="M116.392,41.248c15.712,0,28.45,12.737,28.45,28.451c0,15.711-12.737,28.451-28.45,28.451
c-15.714,0-28.451-12.74-28.451-28.451C87.94,53.985,100.678,41.248,116.392,41.248" />
<path id="two" fill="#008C83" d="M185.792,101.41c-21.004,0-38.033-17.029-38.033-38.033c0-21.007,17.029-38.033,38.033-38.033
c21.005,0,38.034,17.026,38.034,38.033C223.826,84.38,206.796,101.41,185.792,101.41" />
<path id="one" fill="#ECE0DB" d="M81.863,65.05c11.869,0,21.487,9.618,21.487,21.487c0,11.866-9.618,21.487-21.487,21.487
c-11.866,0-21.486-9.621-21.486-21.487C60.376,74.668,69.997,65.05,81.863,65.05" />
<path id="tria" fill="#D52147" d="M181.693,226.285c-14.833,0-26.86-12.025-26.86-26.859c0-14.834,12.027-26.859,26.86-26.859
s26.859,12.024,26.859,26.859C208.552,214.26,196.526,226.285,181.693,226.285" />
</g>
</svg>
我强烈建议您查看 Sara Soueidan's 关于 SVG 的文章和视频。她在这门学科和许多其他学科上都非常出色。
我想在一个 svg 文件中用几个球制作重力效果。 我不使用 JS，我使用这个 fiddle http://jsfiddle.net/BYossarian/Frg74/2/ 作为指导。
#container {
margin: 10px;
width: 100px;
height: 550px;
border-bottom: 1px solid black;
position: relative;
}
.ball {
background: rgb(0, 187, 187);
width: 50px;
height: 50px;
border-radius: 50px;
position: absolute;
left: 40px;
top: 0;
}
.bouncing {
-webkit-animation: bounce 1.5s infinite;
-moz-animation: bounce 1.5s infinite;
-o-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
}
@-webkit-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@-moz-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@-o-keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
@keyframes bounce {
from {
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
75% {
top: 450px;
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
to {
top: 500px;
}
}
<div id="container">
<div class="ball bouncing"></div>
</div>
现在我在这里，我无法移动任何球，我也不知道为什么。 https://jsfiddle.net/kostakos14/Lj97aguL/
SVG 和 HTML 具有不同的坐标系。您应该使用 CSS 属性 transform。转换参考 here.
此外，除非您想变形这些路径，否则您应该使用 SVG 圆形标记来减少代码。
很可能您需要使用 javascript 在您的元素之间设置 animation-delay，否则将难以维护。
有像 GreenSock and Snap 这样非常好的库，可以使处理 SVG 动画时的事情变得更容易。
这是一个简单的演示，一次演示了所有动画。
DEMO
#Balls path {
-webkit-animation: bounce 1.5s infinite;
-moz-animation: bounce 1.5s infinite;
-o-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
animation-timing-function: cubic-bezier(.58, .23, .61, .84)
}
@keyframes bounce {
50% {
transform: translateY(500px);
}
75% {
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
100% {
transform: translateY(0);
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="273.649px" height="331.081px" viewBox="0 0 273.649 331.081" enable-background="new 0 0 273.649 331.081" xml:space="preserve">
<g id="GoT">
<path d="M98.766,84.481v8.241L97.7,93.46c-0.041,0-0.041,0-0.082,0.041c-0.041,0.041-0.123,0.082-0.164,0.082
c-0.041,0.041-0.082,0.082-0.123,0.082c-0.041,0.041-0.082,0.082-0.164,0.082c-0.041,0.041-0.082,0.082-0.164,0.123
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.082,0.041-0.123,0.082c-0.082,0.041-0.123,0.041-0.205,0.082
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.123,0.082-0.205,0.082c-0.041,0.041-0.041,0.041-0.082,0.082c-0.041,0-0.041,0-0.082,0
c-0.041,0.041-0.123,0.082-0.205,0.123s-0.205,0.082-0.287,0.123c0,0,0,0-0.041,0.041c-1.722,0.779-3.526,1.189-5.453,1.312
c0,0,0,0-0.041,0c-0.082,0-0.205,0-0.328,0h-0.041c-0.123,0-0.246,0-0.369,0c-1.64,0-3.28-0.246-4.797-0.779
c-0.041,0-0.041,0-0.041,0c-0.164-0.041-0.287-0.123-0.451-0.164c-0.205-0.082-0.41-0.164-0.615-0.246
c-0.533-0.205-1.025-0.451-1.476-0.738c-1.23-0.656-2.378-1.517-3.362-2.542c-1.394-1.394-2.501-2.993-3.28-4.838
c-0.574-1.394-0.984-2.87-1.107-4.387c-0.041-0.492-0.082-1.025-0.082-1.517c0-0.246,0-0.533,0-0.779
c0.123-1.763,0.492-3.526,1.189-5.166c0.779-1.804,1.886-3.444,3.28-4.838s2.993-2.501,4.838-3.239
c1.845-0.82,3.854-1.189,5.904-1.189c0.123,0,0.246,0,0.369,0h0.041c0.123,0,0.246,0,0.328,0c0.041,0,0.041,0,0.041,0
c0.123,0,0.246,0,0.369,0.041c1.763,0.123,3.485,0.533,5.125,1.271c0,0,0,0.041,0.041,0.041c0.082,0.041,0.164,0.082,0.246,0.123
c0.041,0,0.041,0,0.041,0v5.617c-0.615-0.533-1.312-0.943-2.05-1.312c-0.615-0.287-1.271-0.533-1.886-0.697
c-0.041,0-0.082,0-0.123-0.041c-0.041,0-0.082,0-0.123,0c-0.041-0.041-0.082-0.041-0.164-0.041c0,0-0.041,0-0.082-0.041
c-0.164-0.041-0.369-0.041-0.533-0.082c-0.041,0-0.041,0-0.082,0s-0.123-0.041-0.164-0.041s-0.041,0-0.082,0s-0.123,0-0.164-0.041
c-0.041,0-0.082,0-0.123,0c-0.082,0-0.164,0-0.246,0c-0.041,0-0.082-0.041-0.123-0.041s-0.082,0-0.123,0s-0.123,0-0.164,0
s-0.082,0-0.082,0c-0.082,0-0.205,0-0.287,0c-1.927,0-3.772,0.492-5.371,1.476c-0.041,0.041-0.123,0.082-0.205,0.123
c-0.656,0.41-1.271,0.902-1.804,1.476c-0.164,0.164-0.369,0.328-0.533,0.533c0,0,0,0.041-0.041,0.041
c-0.205,0.246-0.369,0.492-0.533,0.738c-0.041,0.041-0.082,0.082-0.082,0.082c-0.082,0.123-0.164,0.246-0.246,0.369
c-0.041,0.041-0.082,0.123-0.082,0.164c-0.615,0.984-1.025,2.009-1.271,3.116c-0.041,0.041-0.041,0.041-0.041,0.082
c-0.082,0.41-0.164,0.82-0.205,1.23c0,0.164,0,0.328,0,0.451c-0.041,0.205-0.041,0.369-0.041,0.574c0,0.164,0,0.328,0.041,0.533
c0.041,0.779,0.164,1.558,0.369,2.296c0.492,1.722,1.394,3.28,2.665,4.551c1.968,1.968,4.592,3.075,7.38,3.075
c0.082,0,0.205,0,0.287,0c0.041,0,0.082,0,0.123-0.041c0.041,0,0.123,0,0.164,0s0.082,0,0.123,0s0.082,0,0.123,0
c0.082,0,0.123,0,0.205,0c0-0.041,0.041-0.041,0.082-0.041s0.123,0,0.164,0s0.041,0,0.082,0c0.287-0.041,0.615-0.123,0.902-0.164
c0.041,0,0.041,0,0.082-0.041c0.041,0,0.123,0,0.164-0.041c0.041,0,0.082,0,0.123,0c0.041-0.041,0.082-0.041,0.123-0.041
c0.041-0.041,0.123-0.041,0.164-0.041s0.082-0.041,0.082-0.041c0.574-0.164,1.148-0.369,1.681-0.656c0,0,0,0,0.041,0v-5.617h-5.74
v-4.305h10.496V84.481z" />
<path d="M125.662,95.961h-5.371l-7.667-10.291h-3.485v10.291h-4.756V65.539h4.018h5.002c4.018,0,6.355,1.64,7.585,3.034
c1.599,1.763,2.46,4.223,2.46,7.052c0,2.788-0.861,5.248-2.46,7.011c-0.738,0.82-1.886,1.763-3.526,2.337L125.662,95.961z
M113.403,81.406c1.968,0,3.444-0.574,4.387-1.64c1.148-1.23,1.353-2.952,1.353-4.141c0-1.23-0.205-2.952-1.353-4.182
c-0.943-1.066-2.419-1.599-4.387-1.599h-4.264v11.562H113.403z" />
<path d="M146.531,89.442h-10.824l-2.583,6.519h-5.248l13.243-31.816l13.202,31.816h-5.207L146.531,89.442z M144.809,85.178
l-3.69-9.266l-3.69,9.266H144.809z" />
<path d="M163.135,85.588l7.995-20.049h5.166l-13.038,31.775l-13.94-31.775h5.248L163.135,85.588z" />
<path d="M180.519,95.961V65.539h4.756v30.422H180.519z" />
<path d="M211.145,69.803h-8.363v26.158h-4.798V69.803h-8.363v-4.264h21.524V69.803z" />
<path d="M228.858,80.053v15.908h-4.756V80.053l-10.701-14.514h5.125l7.954,10.824l7.954-10.824h5.084L228.858,80.053z" />
<path d="M195.402,143.972c-1.846-0.779-3.444-1.886-4.839-3.28c-1.394-1.394-2.501-2.993-3.279-4.838
c-0.779-1.845-1.189-3.854-1.189-5.904c0-2.05,0.41-4.059,1.189-5.945c0.778-1.804,1.886-3.403,3.279-4.838
c1.395-1.394,2.993-2.46,4.839-3.239c1.845-0.779,3.854-1.189,5.903-1.189c2.051,0,4.06,0.41,5.945,1.189
c1.804,0.779,3.403,1.845,4.838,3.239c1.395,1.435,2.46,3.034,3.239,4.838c0.779,1.886,1.189,3.895,1.189,5.945
c0,2.05-0.41,4.059-1.189,5.904s-1.845,3.444-3.239,4.838c-1.435,1.394-3.034,2.501-4.838,3.28
c-1.886,0.779-3.895,1.189-5.945,1.189C199.255,145.161,197.247,144.751,195.402,143.972z M193.925,122.57
c-1.968,1.968-3.075,4.592-3.075,7.38c0,2.788,1.107,5.412,3.075,7.38c1.968,1.968,4.592,3.075,7.38,3.075s5.412-1.107,7.381-3.075
c1.968-1.968,3.074-4.592,3.074-7.38c0-2.788-1.106-5.412-3.074-7.38c-1.969-1.968-4.593-3.075-7.381-3.075
S195.893,120.602,193.925,122.57z" />
<path d="M226.643,127.121h11.111v4.305h-11.111v13.735h-4.756v-30.422h4.715h13.571v4.264h-13.53V127.121z" />
<path d="M47.022,168.203h-8.364v26.158h-4.797v-26.158h-8.364v-4.264h21.525V168.203z" />
<path d="M73.057,194.361h-4.756v-13.12H56.165v13.12h-4.756v-30.422h4.756v12.997h12.136v-12.997h4.756V194.361z" />
<path d="M87.734,193.172c-1.845-0.779-3.444-1.886-4.838-3.28s-2.501-2.993-3.28-4.838c-0.779-1.845-1.189-3.854-1.189-5.904
c0-2.05,0.41-4.059,1.189-5.945c0.779-1.804,1.886-3.403,3.28-4.838c1.394-1.394,2.993-2.46,4.838-3.239
c1.845-0.779,3.854-1.189,5.904-1.189c2.05,0,4.059,0.41,5.945,1.189c1.804,0.779,3.403,1.845,4.838,3.239
c1.394,1.435,2.46,3.034,3.239,4.838c0.779,1.886,1.189,3.895,1.189,5.945c0,2.05-0.41,4.059-1.189,5.904s-1.845,3.444-3.239,4.838
c-1.435,1.394-3.034,2.501-4.838,3.28c-1.886,0.779-3.895,1.189-5.945,1.189C91.588,194.361,89.58,193.951,87.734,193.172z
M86.258,171.77c-1.968,1.968-3.075,4.592-3.075,7.38c0,2.788,1.107,5.412,3.075,7.38c1.968,1.968,4.592,3.075,7.38,3.075
s5.412-1.107,7.38-3.075c1.968-1.968,3.075-4.592,3.075-7.38c0-2.788-1.107-5.412-3.075-7.38c-1.968-1.968-4.592-3.075-7.38-3.075
S88.227,169.802,86.258,171.77z" />
<path d="M117.378,191.942c-1.189-0.902-2.091-2.009-2.706-3.28c-0.697-1.394-1.025-2.952-1.025-4.633v-20.09h4.756v20.09
c0,1.804,0.656,3.198,1.886,4.141c1.148,0.902,2.829,1.435,4.633,1.435c1.763,0,3.444-0.533,4.633-1.435
c1.23-0.943,1.845-2.337,1.845-4.141v-20.09h4.797v20.09c0,1.681-0.369,3.239-1.025,4.633c-0.656,1.271-1.558,2.378-2.706,3.28
c-2.009,1.558-4.674,2.419-7.544,2.419S119.387,193.5,117.378,191.942z" />
<path d="M165.758,182.881v8.241l-1.066,0.738c-0.041,0-0.041,0-0.082,0.041s-0.123,0.082-0.164,0.082
c-0.041,0.041-0.082,0.082-0.123,0.082c-0.041,0.041-0.082,0.082-0.164,0.082c-0.041,0.041-0.082,0.082-0.164,0.123
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.082,0.041-0.123,0.082c-0.082,0.041-0.123,0.041-0.205,0.082
c-0.041,0.041-0.082,0.041-0.123,0.082s-0.123,0.082-0.205,0.082c-0.041,0.041-0.041,0.041-0.082,0.082c-0.041,0-0.041,0-0.082,0
c-0.041,0.041-0.123,0.082-0.205,0.123s-0.205,0.082-0.287,0.123c0,0,0,0-0.041,0.041c-1.722,0.779-3.525,1.189-5.453,1.312
c0,0,0,0-0.041,0c-0.082,0-0.205,0-0.327,0h-0.041c-0.123,0-0.246,0-0.369,0c-1.64,0-3.28-0.246-4.797-0.779
c-0.041,0-0.041,0-0.041,0c-0.164-0.041-0.287-0.123-0.451-0.164c-0.205-0.082-0.41-0.164-0.615-0.246
c-0.533-0.205-1.025-0.451-1.476-0.738c-1.23-0.656-2.378-1.517-3.362-2.542c-1.394-1.394-2.501-2.993-3.28-4.838
c-0.574-1.394-0.984-2.87-1.107-4.387c-0.041-0.492-0.082-1.025-0.082-1.517c0-0.246,0-0.533,0-0.779
c0.123-1.763,0.492-3.526,1.189-5.166c0.779-1.804,1.886-3.444,3.28-4.838s2.993-2.501,4.838-3.239
c1.845-0.82,3.854-1.189,5.904-1.189c0.123,0,0.246,0,0.369,0h0.041c0.122,0,0.245,0,0.327,0c0.041,0,0.041,0,0.041,0
c0.123,0,0.246,0,0.369,0.041c1.764,0.123,3.485,0.533,5.125,1.271c0,0,0,0.041,0.041,0.041c0.082,0.041,0.164,0.082,0.246,0.123
c0.041,0,0.041,0,0.041,0v5.617c-0.615-0.533-1.312-0.943-2.05-1.312c-0.614-0.287-1.271-0.533-1.886-0.697
c-0.041,0-0.082,0-0.123-0.041c-0.041,0-0.082,0-0.123,0c-0.041-0.041-0.082-0.041-0.164-0.041c0,0-0.041,0-0.082-0.041
c-0.164-0.041-0.369-0.041-0.533-0.082c-0.041,0-0.041,0-0.082,0s-0.123-0.041-0.164-0.041s-0.041,0-0.082,0s-0.123,0-0.164-0.041
c-0.041,0-0.082,0-0.123,0c-0.082,0-0.164,0-0.246,0c-0.041,0-0.082-0.041-0.123-0.041s-0.082,0-0.123,0c-0.04,0-0.122,0-0.163,0
s-0.082,0-0.082,0c-0.082,0-0.205,0-0.287,0c-1.927,0-3.772,0.492-5.371,1.476c-0.041,0.041-0.123,0.082-0.205,0.123
c-0.656,0.41-1.271,0.902-1.804,1.476c-0.164,0.164-0.369,0.328-0.533,0.533c0,0,0,0.041-0.041,0.041
c-0.205,0.246-0.369,0.492-0.533,0.738c-0.041,0.041-0.082,0.082-0.082,0.082c-0.082,0.123-0.164,0.246-0.246,0.369
c-0.041,0.041-0.082,0.123-0.082,0.164c-0.615,0.984-1.025,2.009-1.271,3.116c-0.041,0.041-0.041,0.041-0.041,0.082
c-0.082,0.41-0.164,0.82-0.205,1.23c0,0.164,0,0.328,0,0.451c-0.041,0.205-0.041,0.369-0.041,0.574c0,0.164,0,0.328,0.041,0.533
c0.041,0.779,0.164,1.558,0.369,2.296c0.492,1.722,1.394,3.28,2.665,4.551c1.968,1.968,4.592,3.075,7.38,3.075
c0.082,0,0.205,0,0.287,0c0.041,0,0.082,0,0.123-0.041c0.041,0,0.122,0,0.163,0s0.082,0,0.123,0s0.082,0,0.123,0
c0.082,0,0.123,0,0.205,0c0-0.041,0.041-0.041,0.082-0.041s0.123,0,0.164,0s0.041,0,0.082,0c0.287-0.041,0.615-0.123,0.902-0.164
c0.041,0,0.041,0,0.082-0.041c0.041,0,0.123,0,0.164-0.041c0.041,0,0.082,0,0.123,0c0.041-0.041,0.082-0.041,0.123-0.041
c0.041-0.041,0.123-0.041,0.164-0.041s0.082-0.041,0.082-0.041c0.574-0.164,1.148-0.369,1.681-0.656c0,0,0,0,0.041,0v-5.617h-5.739
v-4.305h10.496V182.881z" />
<path d="M192.408,194.361h-4.756v-13.12h-12.136v13.12h-4.756v-30.422h4.756v12.997h12.136v-12.997h4.756V194.361z" />
<path d="M218.32,168.203h-8.363v26.158h-4.798v-26.158h-8.363v-4.264h21.524V168.203z" />
<path d="M238.206,188.252c-0.861,2.952-3.526,5.289-6.848,5.945c-0.615,0.123-1.229,0.164-1.845,0.164
c-1.23,0-2.46-0.205-3.608-0.656c-1.927-0.779-3.607-2.05-5.043-3.895l3.772-2.952c0.86,1.148,1.886,1.968,2.993,2.378
c0.901,0.369,1.886,0.451,2.788,0.246c1.558-0.287,2.829-1.312,3.197-2.542c0.41-1.394-0.532-2.624-1.394-3.444
c-1.354-1.271-3.567-3.444-3.731-3.608l-3.73-3.526c-1.148-1.107-1.927-2.337-2.337-3.649c-0.41-1.271-0.451-2.624-0.082-3.854
c0.369-1.312,1.147-2.46,2.255-3.403c1.024-0.861,2.296-1.476,3.648-1.722c1.477-0.328,3.034-0.205,4.511,0.328
c1.558,0.615,2.952,1.64,4.141,3.075l-3.73,2.993c-1.559-1.886-3.157-1.886-4.019-1.722c-1.065,0.205-1.968,0.902-2.214,1.763
c-0.164,0.574-0.123,1.517,1.148,2.747l5.084,4.879c0.737,0.738,1.64,1.599,2.296,2.214c1.312,1.189,2.214,2.542,2.665,3.977
C238.575,185.382,238.615,186.858,238.206,188.252z" />
</g>
<g id="Balls">
<path id="a" fill="#ECE0DB" d="M146.425,249.886c-14.506-1.662-24.877-14.398-23.161-28.447
c1.717-14.05,14.868-24.095,29.375-22.432c14.506,1.662,24.877,14.396,23.159,28.447
C174.083,241.504,160.932,251.548,146.425,249.886" />
<path id="t" fill="#00A69C" d="M220.91,207.845c-9.208,0-16.67-7.462-16.67-16.668c0-9.208,7.462-16.671,16.67-16.671
c9.206,0,16.668,7.463,16.668,16.671C237.578,200.383,230.116,207.845,220.91,207.845" />
<path id="s" fill="#00A69C" d="M165.229,151.194c10.115,0,18.314,8.2,18.314,18.315c0,10.114-8.199,18.315-18.314,18.315
c-10.116,0-18.316-8.201-18.316-18.315C146.913,159.394,155.113,151.194,165.229,151.194" />
<path id="o" fill="#6F3B91" d="M99.768,197.281c-10.801,0-19.555-8.754-19.555-19.555c0-10.798,8.754-19.554,19.555-19.554
c10.799,0,19.554,8.755,19.554,19.554C119.321,188.527,110.566,197.281,99.768,197.281" />
<path id="k" fill="#D52147" d="M194.754,146.1c10.205,0,18.478,8.272,18.478,18.477c0,10.205-8.272,18.478-18.478,18.478
s-18.478-8.272-18.478-18.478C176.277,154.372,184.549,146.1,194.754,146.1" />
<path id="quatre" fill="#6F3B91" d="M38.281,197.957c-11.921,0-21.582-9.51-21.582-21.245c0-11.731,9.661-21.243,21.582-21.243
c11.918,0,21.581,9.512,21.581,21.243C59.861,188.447,50.199,197.957,38.281,197.957" />
<path id="troi" fill="#D52147" d="M147.885,99.437c-8.662,0-15.686-7.021-15.686-15.686c0-8.662,7.023-15.687,15.686-15.687
c8.664,0,15.686,7.025,15.686,15.687C163.571,92.415,156.549,99.437,147.885,99.437" />
<path id="de" fill="#ECE0DB" d="M227.045,99.284c-11.293,0-20.448-9.155-20.448-20.448c0-11.293,9.155-20.447,20.448-20.447
c11.289,0,20.445,9.154,20.445,20.447C247.491,90.129,238.334,99.284,227.045,99.284" />
<path id="un" fill="#ECE0DB" d="M160.153,108.068c-8.307,0-15.042-6.734-15.042-15.042c0-8.308,6.735-15.042,15.042-15.042
c8.305,0,15.041,6.734,15.041,15.042C175.194,101.333,168.458,108.068,160.153,108.068" />
<path id="deka" fill="#D52147" d="M85.27,245.01c-17.683,0-32.017-14.334-32.017-32.019c0-17.681,14.334-32.014,32.017-32.014
s32.018,14.333,32.018,32.014C117.288,230.676,102.953,245.01,85.27,245.01" />
<path id="ennia" fill="#D52147" d="M226.617,146.477c-10.126,0-18.332-8.206-18.332-18.331c0-10.123,8.206-18.333,18.332-18.333
c10.123,0,18.329,8.209,18.329,18.333C244.946,138.271,236.74,146.477,226.617,146.477" />
<path id="oxtw" fill="#D52147" d="M127.629,282.499c-9.777,0-17.704-7.926-17.704-17.705s7.927-17.703,17.704-17.703
c9.776,0,17.704,7.924,17.704,17.703S137.405,282.499,127.629,282.499" />
<path id="efta" fill="#D02F3A" d="M70.654,187.673c-7.572,0-13.712-6.139-13.712-13.71s6.141-13.707,13.712-13.707
c7.571,0,13.71,6.136,13.71,13.707S78.225,187.673,70.654,187.673" />
<path id="exi" fill="#00A69C" d="M115.905,306.296c-8.19,0-14.827-6.641-14.827-14.828s6.637-14.824,14.827-14.824
c8.189,0,14.827,6.637,14.827,14.824S124.094,306.296,115.905,306.296" />
<path id="pente" fill="#D52147" d="M193.616,248.896c-8.662,0-15.686-7.021-15.686-15.686c0-8.662,7.023-15.687,15.686-15.687
c8.664,0,15.686,7.024,15.686,15.687C209.301,241.875,202.28,248.896,193.616,248.896" />
<path id="tessera" fill="#ECE0DB" d="M223.907,194.617c-10.992,0-19.903-8.91-19.903-19.903c0-10.992,8.911-19.901,19.903-19.901
c10.988,0,19.899,8.909,19.899,19.901C243.806,185.708,234.895,194.617,223.907,194.617" />
<path id="twelve" fill="#6F3B91" d="M167.47,155.362c-10.801,0-19.555-8.754-19.555-19.555c0-10.798,8.754-19.554,19.555-19.554
c10.799,0,19.554,8.755,19.554,19.554C187.024,146.608,178.269,155.362,167.47,155.362" />
<path id="eleven" fill="#00A69C" d="M204.036,154.376c-7.715,0-13.967-6.253-13.967-13.966c0-7.715,6.252-13.968,13.967-13.968
c7.714,0,13.966,6.253,13.966,13.968C218.001,148.124,211.75,154.376,204.036,154.376" />
<path id="ten" fill="#5D2D7B" d="M187.704,140.605c-13.067,0-23.657-10.591-23.657-23.656c0-13.063,10.59-23.654,23.654-23.654
c13.066,0,23.657,10.591,23.657,23.654C211.358,130.014,200.767,140.605,187.704,140.605" />
<path id="nine" fill="#D52147" d="M140.718,132.57c-11.986,0-21.701-9.716-21.701-21.702c0-11.985,9.715-21.701,21.701-21.701
c11.987,0,21.704,9.716,21.704,21.701C162.421,122.854,152.705,132.57,140.718,132.57" />
<path id="eight" fill="#ECE0DB" d="M137.28,206.233c-13.354,0-24.18-10.825-24.18-24.179c0-13.357,10.825-24.182,24.18-24.182
s24.178,10.825,24.178,24.182C161.458,195.408,150.634,206.233,137.28,206.233" />
<path id="seven" fill="#D52147" d="M185.741,132.35c-6.469,0-11.712-5.242-11.712-11.71c0-6.467,5.243-11.71,11.712-11.71
c6.466,0,11.71,5.243,11.71,11.71C197.451,127.108,192.207,132.35,185.741,132.35" />
<path id="six" fill="#00A69C" d="M100.649,219.161c14.715,0,26.644,11.928,26.644,26.643c0,14.717-11.928,26.646-26.644,26.646
c-14.716,0-26.645-11.93-26.645-26.646C74.004,231.089,85.933,219.161,100.649,219.161" />
<path id="five" fill="#00A69C" d="M58.25,176.817c5.579,0,10.099,4.524,10.099,10.099c0,5.58-4.52,10.103-10.099,10.103
c-5.576,0-10.098-4.522-10.098-10.103C48.152,181.341,52.674,176.817,58.25,176.817" />
<path id="four" fill="#D52147" d="M101.76,110.733c17.109,0,30.979,13.868,30.979,30.977s-13.87,30.978-30.979,30.978
c-17.108,0-30.977-13.869-30.977-30.978S84.651,110.733,101.76,110.733" />
<path id="three" fill="#00A69C" d="M116.392,41.248c15.712,0,28.45,12.737,28.45,28.451c0,15.711-12.737,28.451-28.45,28.451
c-15.714,0-28.451-12.74-28.451-28.451C87.94,53.985,100.678,41.248,116.392,41.248" />
<path id="two" fill="#008C83" d="M185.792,101.41c-21.004,0-38.033-17.029-38.033-38.033c0-21.007,17.029-38.033,38.033-38.033
c21.005,0,38.034,17.026,38.034,38.033C223.826,84.38,206.796,101.41,185.792,101.41" />
<path id="one" fill="#ECE0DB" d="M81.863,65.05c11.869,0,21.487,9.618,21.487,21.487c0,11.866-9.618,21.487-21.487,21.487
c-11.866,0-21.486-9.621-21.486-21.487C60.376,74.668,69.997,65.05,81.863,65.05" />
<path id="tria" fill="#D52147" d="M181.693,226.285c-14.833,0-26.86-12.025-26.86-26.859c0-14.834,12.027-26.859,26.86-26.859
s26.859,12.024,26.859,26.859C208.552,214.26,196.526,226.285,181.693,226.285" />
</g>
</svg>
我强烈建议您查看 Sara Soueidan's 关于 SVG 的文章和视频。她在这门学科和许多其他学科上都非常出色。