0
codepenのこのSVGアニメーションがなぜ機能するのかわかりません。スプリンクルを左から右に動かすアニメーションでは、アニメーションを元の状態に戻し続けます。ここで私が持っている質問は、translateXプロパティが154.5pxにしかならない理由です。SVGアニメーション説明
私は途中で見たコードパッドからこれをフォークしました。とにかく、私は彼らがこの数字をどのように思いついたか完全に混乱しています。この数字を取得するには何の計算が必要ですか？
body {
background-color: #000;
}
.center {
text-align: center;
}
#Circle{
display:none
}
@keyframes bottommotion {
0% {transform: rotate(0deg)}
14% {transform: rotate(10deg)}
29% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, 38px)}
88% {transform: translate(0px, 0px)}
}
#Bottom {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: bottommotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
@keyframes topmotion {
0% {transform: rotate(0deg)}
23% {transform: rotate(10deg)}
38% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, -54px)}
100% {transform: translate(0px, 0px)}
}
#Top {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: topmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
@keyframes spotmotion {
0% {transform: translate(0px,0px)}
100% {transform: translate(154.5px,0px)}
}
#Spots {
transform-origin: 50% 50%;
animation-timing-function: linear;
animation-name: spotmotion;
animation-duration: .23s;
animation-iteration-count: infinite;
}
@keyframes shadowmotion {
0% {opacity:0.75; transform:translate(0px, 0px)}
45% {opacity:0.75; transform:translate(0px, 0px)}
55% {opacity:0.95; transform:translate(0px, -6px)}
95% {opacity:0.75; transform:translate(0px, 0px)}
100% {opacity:0.75; transform:translate(0px, 0px)}
}
#Shadow {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: shadowmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}<div class="center"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="505.821px" height="325.822px" viewBox="0 0 505.821 325.822" enable-background="new 0 0 505.821 325.822"
xml:space="preserve">
<g id="Background">
<rect width="505.821" height="325.822"/>
</g>
<g id="Spots">
<g>
<path fill="#00192a" d="M-146.92,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,273.137-145.042,271.615-146.92,271.615z"/>
<path fill="#00192a" d="M9.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,273.137,10.958,271.615,9.08,271.615z"/>
<path fill="#00192a" d="M165.08,271.615H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,273.137,166.958,271.615,165.08,271.615z"/>
<path fill="#00192a" d="M321.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,273.137,322.958,271.615,321.08,271.615z"/>
<path fill="#00192a" d="M477.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,273.137,478.958,271.615,477.08,271.615z"/>
<path fill="#00192a" d="M633.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,273.137,634.958,271.615,633.08,271.615z"/>
<path fill="#00192a" d="M789.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,273.137,790.958,271.615,789.08,271.615z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,200.467-193.528,198.945-195.406,198.945z"/>
<path fill="#00192a" d="M-39.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,200.467-37.528,198.945-39.406,198.945z"/>
<path fill="#00192a" d="M116.594,198.945H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,200.467,118.472,198.945,116.594,198.945z"/>
<path fill="#00192a" d="M272.594,198.945H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,200.467,274.472,198.945,272.594,198.945z"/>
<path fill="#00192a" d="M428.594,198.945H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,200.467,430.472,198.945,428.594,198.945z"/>
<path fill="#00192a" d="M584.594,198.945H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,200.467,586.472,198.945,584.594,198.945z"/>
<path fill="#00192a" d="M740.594,198.945H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,200.467,742.472,198.945,740.594,198.945z"/>
</g>
<g>
<path fill="#00192a" d="M-146.92,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,121.549-145.042,120.026-146.92,120.026z"/>
<path fill="#00192a" d="M9.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,121.549,10.958,120.026,9.08,120.026z"/>
<path fill="#00192a" d="M165.08,120.026H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,121.549,166.958,120.026,165.08,120.026z"/>
<path fill="#00192a" d="M321.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,121.549,322.958,120.026,321.08,120.026z"/>
<path fill="#00192a" d="M477.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,121.549,478.958,120.026,477.08,120.026z"/>
<path fill="#00192a" d="M633.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,121.549,634.958,120.026,633.08,120.026z"/>
<path fill="#00192a" d="M789.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,121.549,790.958,120.026,789.08,120.026z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,53.879-193.528,52.356-195.406,52.356z"/>
<path fill="#00192a" d="M-39.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,53.879-37.528,52.356-39.406,52.356z"/>
<path fill="#00192a" d="M116.594,52.356H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,53.879,118.472,52.356,116.594,52.356z"/>
<path fill="#00192a" d="M272.594,52.356H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,53.879,274.472,52.356,272.594,52.356z"/>
<path fill="#00192a" d="M428.594,52.356H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,53.879,430.472,52.356,428.594,52.356z"/>
<path fill="#00192a" d="M584.594,52.356H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,53.879,586.472,52.356,584.594,52.356z"/>
<path fill="#00192a" d="M740.594,52.356H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,53.879,742.472,52.356,740.594,52.356z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,16.326-205.688,16.326z"/>
<path fill="#0090A5" d="M-49.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,16.326-49.688,16.326z"/>
<path fill="#0090A5" d="M106.312,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,16.326,106.312,16.326z"/>
<path fill="#0090A5" d="M262.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,16.326,262.311,16.326z"/>
<path fill="#0090A5" d="M418.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,16.326,418.311,16.326z"/>
<path fill="#0090A5" d="M574.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,16.326,574.311,16.326z"/>
<path fill="#0090A5" d="M730.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,16.326,730.311,16.326z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,85.058-278.269,85.058z"/>
<path fill="#0090A5" d="M-122.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,85.058-122.269,85.058z"/>
<path fill="#0090A5" d="M33.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,85.058,33.731,85.058z"/>
<path fill="#0090A5" d="M189.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,85.058,189.731,85.058z"/>
<path fill="#0090A5" d="M345.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,85.058,345.731,85.058z"/>
<path fill="#0090A5" d="M501.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,85.058,501.731,85.058z"/>
<path fill="#0090A5" d="M657.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,85.058,657.731,85.058z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,159.152-205.688,159.152z"/>
<path fill="#0090A5" d="M-49.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,159.152-49.688,159.152z"/>
<path fill="#0090A5" d="M106.312,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,159.152,106.312,159.152z"/>
<path fill="#0090A5" d="M262.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,159.152,262.311,159.152z"/>
<path fill="#0090A5" d="M418.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,159.152,418.311,159.152z"/>
<path fill="#0090A5" d="M574.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,159.152,574.311,159.152z"/>
<path fill="#0090A5" d="M730.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,159.152,730.311,159.152z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,301.978-205.688,301.978z"/>
<path fill="#0090A5" d="M-49.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,301.978-49.688,301.978z"/>
<path fill="#0090A5" d="M106.312,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,301.978,106.312,301.978z"/>
<path fill="#0090A5" d="M262.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,301.978,262.311,301.978z"/>
<path fill="#0090A5" d="M418.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,301.978,418.311,301.978z"/>
<path fill="#0090A5" d="M574.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,301.978,574.311,301.978z"/>
<path fill="#0090A5" d="M730.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,301.978,730.311,301.978z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,227.884-278.269,227.884z"/>
<path fill="#0090A5" d="M-122.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,227.884-122.269,227.884z"/>
<path fill="#0090A5" d="M33.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,227.884,33.731,227.884z"/>
<path fill="#0090A5" d="M189.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,227.884,189.731,227.884z"/>
<path fill="#0090A5" d="M345.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,227.884,345.731,227.884z"/>
<path fill="#0090A5" d="M501.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,227.884,501.731,227.884z"/>
<path fill="#0090A5" d="M657.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,227.884,657.731,227.884z"/>
</g>
</g>
<g id="Shadow">
<ellipse fill="#00243C" cx="252.403" cy="291.789" rx="68" ry="20"/>
</g>
<g id="Bottom">
<g>
<g>
<path fill="#60C29E" d="M177.332,156.984c0.001,50.103,33.611,90.72,75.071,90.72s75.068-40.617,75.069-90.72H177.332z"/>
<path fill="#87C65F" d="M252.402,156.984v90.72c0.001,0,0.001,0,0.001,0c41.46,0,75.068-40.617,75.069-90.72H252.402z"/>
<path fill="#38A479" d="M304.012,156.984H200.789c0,50.101,23.11,90.718,51.611,90.72c0,0,0.002,0,0.003,0
C280.91,247.703,304.012,207.087,304.012,156.984z"/>
<path fill="#32B44E" d="M252.401,156.984v90.72c0.001,0,0.001,0,0.002,0c28.507-0.002,51.609-40.617,51.609-90.72H252.401z"/>
<path fill="#00904C" d="M271.169,156.984h-37.536c0,50.103,8.404,90.718,18.769,90.72l0,0
C262.768,247.703,271.169,207.087,271.169,156.984z"/>
<ellipse fill="#006744" cx="252.403" cy="156.984" rx="75.071" ry="18.144"/>
<ellipse fill="#F69077" cx="252.403" cy="156.984" rx="60.808" ry="14.697"/>
<ellipse fill="#EF413C" cx="252.403" cy="156.984" rx="53.774" ry="12.996"/>
<path d="M217.479,156.382c2.512,2.117,2.337,6.792,2.299,6.825c-0.033,0.031-5.408,0.331-7.918-1.787
c-2.511-2.117-3.289-4.96-1.736-6.353C211.677,153.676,214.967,154.264,217.479,156.382z"/>
<path d="M237.369,154.375c1.364,2.8-0.894,7.048-0.942,7.066c-0.047,0.017-5.126-1.529-6.491-4.329
c-1.363-2.8-0.805-5.684,1.249-6.439C233.237,149.917,236.004,151.575,237.369,154.375z"/>
<path d="M257.023,154.546c0,3.04-3.982,6.188-4.036,6.186c-0.05,0-4.036-3.146-4.036-6.186c0-3.041,1.808-5.507,4.036-5.508
C255.216,149.04,257.023,151.504,257.023,154.546z"/>
<path d="M276.065,156.733c-1.363,2.8-6.441,4.348-6.489,4.329c-0.047-0.018-2.309-4.266-0.947-7.064
c1.366-2.802,4.135-4.459,6.188-3.704C276.869,151.049,277.427,153.931,276.065,156.733z"/>
<path d="M294.224,160.676c-2.509,2.117-7.88,1.819-7.916,1.786c-0.035-0.03-0.213-4.709,2.296-6.826
c2.513-2.116,5.808-2.704,7.358-1.312C297.515,155.715,296.737,158.56,294.224,160.676z"/>
</g>
<!-- \t \t <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
<g id="Top">
<g>
<g>
<path fill="#60C29E" d="M252.403,175.152c41.46,0,75.069-8.123,75.069-18.144c0,0,0,0,0-0.001
c0-50.104-33.609-90.719-75.069-90.719s-75.071,40.615-75.071,90.719c0,0,0,0.001,0,0.001
C177.332,167.029,210.943,175.152,252.403,175.152z"/>
<path fill="#38A479" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719c-28.502,0-51.613,40.615-51.613,90.719c0,4.518,0.191,8.956,0.554,13.297
C214.74,173.311,232.678,175.152,252.403,175.152z"/>
<path opacity="0.62" fill="#00A654" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
<path fill="#87C65F" d="M257.023,66.464v108.65c39.306-0.577,70.449-8.461,70.449-18.106c0,0,0,0,0-0.001
C327.472,108.779,296.33,69.349,257.023,66.464z"/>
<path fill="#32B44E" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719L252.403,175.152C252.403,175.152,252.403,175.152,252.403,175.152z"/>
<path fill="#00904C" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
</g>
<!-- \t \t <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
</svg>
</div>http://codepen.io/Jesders88/pen/mOXVRK
私はパスの間の距離を教えてくれる上記のSVGを見ていますか？それを行う簡単な方法はありますか？ – jesders88
すべてのスポットがお互いのコピーであると仮定して、ちょうど再配置されました。彼らの出発ポジションを見ることができます。たとえば、最初のパス（ 'M-146.92,271.615'）と2番目のパス（' M9.08,271.615'）を見てみましょう。 Mは移動を表します（つまり、パスの始点を位置付けます）。 XとYの座標が続きます。この場合、それぞれのX座標は-146.92と9.08です。これらの2つの違いは156です.2番目と3番目のパスなどにも同じことが当てはまります.Y座標が同じであるため、それらがパスの行にあると判断できます。 –
パーフェクトExplantation。ありがとう – jesders88