1
ダークブルーのドットを同じスピードで実行したいと思っていますが、1ドットも少し遅れます。また、ロゴの円の後にすべてのドットが1つの大きなドットラップトップアイコンに移動します。私が試したものをここでSVG animateMotionの時間が正しく動作しない
それは... 親切にここ
はスニペット
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 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"
\t viewBox="0 0 970 570" style="enable-background:new 0 0 970 570;" xml:space="preserve">
<defs>
<style type="text/css">
\t .st0{fill:none;stroke:#303D4F;stroke-miterlimit:10;}
\t .st1{fill:#21A8E0;}
\t .st2{fill:#FFFFFF;}
\t .st3{font-family:'Lato-Light';}
\t .st4{font-size:16px;}
\t .st5{fill:#303D4F;stroke:#303D4F;stroke-miterlimit:10;}
\t .st6{fill:#6EC5E0;}
\t .st7{fill:#DDE9F1;}
\t .st8{fill:none;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
\t .st9{fill:#FFFFFF;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
\t .st10{fill:#FAFBFC;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
\t .st11{fill:#303D4F;}
\t path {
\t stroke-dasharray: 1093.92, 1093.92;
\t stroke-dashoffset: 0;
\t transition-timing-function: linear;
\t transition-duration: 2.5s;
\t transition-delay: 0.5s;
\t animation-duration: 2.5s;
\t }
</style>
</defs>
<g>
\t <g>
\t \t <path class="st0" d="M467.9,306.3H150.1c-11.9,0-21.6,9.7-21.6,21.6v74.5" id="path-to-trace-6"/>
\t \t <path class="st0" d="M467.9,263.6H185.8c-11.9,0-21.6-9.7-21.6-21.6V101.8" id="path-to-trace-1"/>
\t \t <path class="st0" d="M467.9,284.7H120.3c-11.9,0-21.6-9.7-21.6-21.6V222" id="path-to-trace-2"/>
\t \t <path class="st0" d="M280.7,165.9v70.3c0,4,3.2,7.2,7.2,7.2h180.1l35.9,51.8" id="path-to-trace-3"/>
\t \t <path fill="none" stroke="none" stroke-miterlimit="10" d="M0,0h204.6" id="last-path"></path>
\t \t <line fill="none" stroke="#303D4F" stroke-miterlimit="10" x1="440.3" y1="295.2" x2="819" y2="295.2"></line>
\t \t <g>
\t \t \t <path class="st1" d="M139.5,201.8c0,11-9,20-20,20H78c-11,0-20-9-20-20v-4.5c0-11,9-20,20-20h41.6c11,0,20,9,20,20V201.8z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 80.6445 205.3301)" class="st2 st3 st4">Trade</text>
\t \t <g>
\t \t \t <path class="st1" d="M213.1,425.8c0,11-9,20-20,20h-92.1c-11,0-20-9-20-20v-4.5c0-11,9-20,20-20h92.1c11,0,20,9,20,20V425.8z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 110.1387 429.3643)" class="st2 st3 st4">Derivatives</text>
\t \t <g>
\t \t \t <path class="st1" d="M359.7,146.8c0,11-9,20-20,20H218c-11,0-20-9-20-20v-4.5c0-11,9-20,20-20h121.7c11,0,20,9,20,20V146.8z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 220.1895 150.3301)" class="st2 st3 st4">Macro-economics</text>
\t \t <g>
\t \t \t <path class="st1" d="M250.6,83c0,11-9,20-20,20H97.8c-11,0-20-9-20-20v-4.5c0-11,9-20,20-20h132.9c11,0,20,9,20,20V83z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 101.3477 86.4922)" class="st2 st3 st4">Supply v/s demand</text>
\t \t <path class="st0" d="M467.9,327.4H248.2c-11.9,0-21.6,9.7-21.6,21.6v119.2" id="path-to-trace-4"/>
\t \t <g>
\t \t \t <path class="st1" d="M307.5,491.5c0,11-9,20-20,20H165.7c-11,0-20-9-20-20V487c0-11,9-20,20-20h121.7c11,0,20,9,20,20V491.5z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 167.916 495.042)" class="st2 st3 st4">Financial markets</text>
\t \t <g>
\t \t \t <path class="st1" d="M367.4,408.7c0,11-9,20-20,20h-84.8c-11,0-20-9-20-20v-4.5c0-11,9-20,20-20h84.8c11,0,20,9,20,20V408.7z"/>
\t \t </g>
\t \t <text transform="matrix(1 0 0 1 267.4238 412.1934)" class="st2 st3 st4">Geo politics</text>
\t \t <path class="st0" d="M467.9,347.7H311c-4,0-7.2,3.2-7.2,7.2v29.4" id="path-to-trace-5"/>
\t \t <circle fill="#313c50" cx="" cy="" r="6.7">
\t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-1"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle fill="#313c50" cx="" cy="" r="6.7">
\t \t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-2"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle fill="#313c50" cx="" cy="" r="6.7">
\t \t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" calcMode="linear" rotate="auto">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-3"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle fill="#313c50" cx="" cy="" r="6.7">
\t \t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-6"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle fill="#313c50" cx=" " cy="" r="6.7">
\t \t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-4"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle fill="#313c50" cx="" cy="" r="6.7">
\t \t \t \t <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto" id="smallCircle">
\t \t \t <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-5"></mpath>
\t \t \t </animateMotion>
\t \t \t </circle>
\t \t \t <circle class="st5" cx="" cy="" r="11.2">
\t \t \t \t <animateMotion begin="smallCircle.end-0.5s" dur="4s" calcMode="linear" id="bigCircle">
\t \t <mpath xlink:href="#last-path"></mpath>
\t \t </animateMotion>
\t \t \t </circle>
\t \t <g>
\t \t \t <circle class="st6" cx="503.9" cy="292" r="79.4"/>
\t \t \t <g>
\t \t \t \t <path class="st2" d="M478.4,276.5l-0.2,1.8c0,0.3-0.1,0.5-0.2,0.7c-0.1,0.2-0.3,0.5-0.4,0.7l-18.1,24.8h15.2l-0.6,4.7h-23
\t \t \t \t \t l0.2-1.8c0-0.3,0.1-0.5,0.2-0.7c0.1-0.2,0.3-0.5,0.4-0.7l18.2-24.9h-14.5l0.6-4.7H478.4z"/>
\t \t \t \t <path class="st2" d="M494,309.3c-0.7,0-1.2-0.2-1.4-0.5c-0.3-0.3-0.4-0.7-0.4-1.2l0.2-3.4c-1.1,1.7-2.4,3-3.8,4
\t \t \t \t \t c-1.4,1-2.9,1.5-4.4,1.5c-1,0-1.8-0.2-2.6-0.5c-0.8-0.4-1.5-0.9-2-1.6c-0.6-0.7-1-1.6-1.3-2.7c-0.3-1.1-0.5-2.4-0.5-3.9
\t \t \t \t \t c0-1.3,0.1-2.6,0.4-3.9c0.3-1.3,0.7-2.5,1.2-3.6c0.5-1.1,1.1-2.2,1.8-3.1c0.7-1,1.5-1.8,2.3-2.5c0.8-0.7,1.7-1.2,2.7-1.6
\t \t \t \t \t c1-0.4,2-0.6,3-0.6c1,0,2,0.2,2.8,0.6c0.8,0.4,1.6,0.9,2.2,1.5l1.5-12.2h5.5l-4.1,33.7H494z M486.3,305.2c0.6,0,1.2-0.2,1.9-0.6
\t \t \t \t \t c0.6-0.4,1.2-1,1.8-1.7c0.6-0.7,1.1-1.6,1.6-2.6c0.5-1,0.9-2.1,1.3-3.2l0.7-5.6c-0.5-0.6-1.1-1-1.8-1.2
\t \t \t \t \t c-0.7-0.2-1.3-0.3-1.9-0.3c-1,0-1.9,0.3-2.7,0.9c-0.8,0.6-1.5,1.4-2.1,2.4c-0.6,1-1,2.1-1.3,3.4c-0.3,1.2-0.5,2.5-0.5,3.8
\t \t \t \t \t c0,1.6,0.3,2.8,0.8,3.6C484.6,304.8,485.4,305.2,486.3,305.2z"/>
\t \t \t \t <path class="st2" d="M520.6,309.3h-2.9c-0.7,0-1.2-0.2-1.4-0.5c-0.3-0.3-0.4-0.7-0.4-1.2l0.2-3.2c-1,1.6-2.2,2.9-3.5,3.8
\t \t \t \t \t c-1.3,0.9-2.7,1.4-4.2,1.4c-0.9,0-1.7-0.2-2.5-0.5c-0.8-0.3-1.4-0.9-2-1.6c-0.6-0.7-1-1.5-1.3-2.6c-0.3-1-0.5-2.3-0.5-3.6
\t \t \t \t \t c0-1.4,0.2-2.7,0.5-4.1c0.3-1.3,0.8-2.5,1.5-3.7c0.6-1.2,1.4-2.2,2.3-3.2c0.9-1,1.9-1.8,3-2.5c1.1-0.7,2.3-1.2,3.6-1.6
\t \t \t \t \t c1.3-0.4,2.7-0.6,4.1-0.6c1,0,2.1,0.1,3.1,0.2c1,0.2,2.1,0.4,3.1,0.8L520.6,309.3z M510.5,305.1c0.6,0,1.2-0.2,1.8-0.6
\t \t \t \t \t c0.6-0.4,1.2-1,1.7-1.8c0.5-0.8,1-1.6,1.5-2.6c0.5-1,0.8-2.1,1.2-3.3l0.9-7c-0.4,0-0.8-0.1-1.1-0.1c-1.3,0-2.4,0.3-3.5,0.9
\t \t \t \t \t c-1.1,0.6-2,1.3-2.8,2.3c-0.8,1-1.4,2.1-1.8,3.4c-0.4,1.3-0.7,2.7-0.7,4.1c0,1.6,0.3,2.8,0.8,3.6
\t \t \t \t \t C508.9,304.7,509.6,305.1,510.5,305.1z"/>
\t \t \t \t <path class="st2" d="M526.1,309.3l4.1-33.7h5.5l-4.1,33.7H526.1z"/>
\t \t \t \t <path class="st2" d="M544.4,315.7c-0.4,0.8-1,1.2-1.8,1.2h-4.1l5.2-9.4l-5.9-21.5h4.7c0.4,0,0.7,0.1,0.9,0.3
\t \t \t \t \t c0.2,0.2,0.3,0.5,0.4,0.7l2.9,12.1c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.1,1.2c0.2-0.4,0.3-0.8,0.5-1.2
\t \t \t \t \t c0.2-0.4,0.4-0.8,0.5-1.2l5.7-12.1c0.2-0.3,0.4-0.5,0.7-0.7c0.3-0.2,0.6-0.3,0.9-0.3h4.5L544.4,315.7z"/>
\t \t \t \t \t
\t \t \t </g>
\t \t </g>
\t \t <g>
\t \t \t <g>
\t \t \t \t <g>
\t \t \t \t \t <path class="st7" d="M896.5,346.9c0,2.6-2.1,4.8-4.7,4.8H713.2c-2.6,0-4.7-2.1-4.7-4.8V224.8c0-2.6,2.1-4.7,4.7-4.7h178.5
\t \t \t \t \t \t c2.6,0,4.7,2.1,4.7,4.7V346.9z"/>
\t \t \t \t \t <path class="st8" d="M896.5,346.9c0,2.6-2.1,4.8-4.7,4.8H713.2c-2.6,0-4.7-2.1-4.7-4.8V224.8c0-2.6,2.1-4.7,4.7-4.7h178.5
\t \t \t \t \t \t c2.6,0,4.7,2.1,4.7,4.7V346.9z"/>
\t \t \t \t </g>
\t \t \t \t <rect x="719.5" y="231.1" class="st9" width="166" height="109.5"/>
\t \t \t \t <path class="st10" d="M907.6,360.2c-46.3,0-157.1,0-210.3,0c-2.4,0-4.4-8.5-4.4-8.5H912C912,351.7,910,360.2,907.6,360.2z"/>
\t \t \t \t <polygon class="st10" points="829.2,355.3 775.7,355.3 774.6,351.7 830.3,351.7 \t \t \t \t "/>
\t \t \t </g>
\t \t \t <g>
\t \t \t \t <g>
\t \t \t \t \t <path class="st11" d="M759.4,320.2c-0.5,0-0.9-0.4-0.9-0.9v-64.6c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9v64.6
\t \t \t \t \t \t C760.2,319.8,759.8,320.2,759.4,320.2z"/>
\t \t \t \t </g>
\t \t \t \t <g>
\t \t \t \t \t <path class="st11" d="M849.7,320.2h-90.3c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9h90.3c0.5,0,0.9,0.4,0.9,0.9
\t \t \t \t \t \t C850.5,319.8,850.1,320.2,849.7,320.2z"/>
\t \t \t \t </g>
\t \t \t \t <g>
\t \t \t \t \t <path class="st11" d="M775.9,320.2h-9.4c-0.5,0-0.9-0.4-0.9-0.9v-44c0-0.5,0.4-0.9,0.9-0.9h9.4c0.5,0,0.9,0.4,0.9,0.9v44
\t \t \t \t \t \t C776.8,319.8,776.4,320.2,775.9,320.2z M767.4,318.5h7.6v-42.2h-7.6V318.5z"/>
\t \t \t \t </g>
\t \t \t \t <path class="st11" d="M791.8,320.2h-9.4c-0.5,0-0.9-0.4-0.9-0.9v-62.4c0-0.5,0.4-0.9,0.9-0.9h9.4c0.5,0,0.9,0.4,0.9,0.9v62.4
\t \t \t \t \t C792.7,319.8,792.3,320.2,791.8,320.2z M783.3,318.5h7.6v-60.7h-7.6V318.5z"/>
\t \t \t \t <path class="st11" d="M807.7,320.2h-9.4c-0.5,0-0.9-0.4-0.9-0.9V267c0-0.5,0.4-0.9,0.9-0.9h9.4c0.5,0,0.9,0.4,0.9,0.9v52.4
\t \t \t \t \t C808.6,319.8,808.2,320.2,807.7,320.2z M799.2,318.5h7.6v-50.6h-7.6V318.5z"/>
\t \t \t \t <path class="st11" d="M823.6,320.2h-9.4c-0.5,0-0.9-0.4-0.9-0.9v-36.8c0-0.5,0.4-0.9,0.9-0.9h9.4c0.5,0,0.9,0.4,0.9,0.9v36.8
\t \t \t \t \t C824.5,319.8,824.1,320.2,823.6,320.2z M815.1,318.5h7.6v-35h-7.6V318.5z"/>
\t \t \t \t <path class="st11" d="M840.1,320.2h-9.4c-0.5,0-0.9-0.4-0.9-0.9v-46.4c0-0.5,0.4-0.9,0.9-0.9h9.4c0.5,0,0.9,0.4,0.9,0.9v46.4
\t \t \t \t \t C841,319.8,840.6,320.2,840.1,320.2z M831.6,318.5h7.6v-44.6h-7.6V318.5z"/>
\t \t \t </g>
\t \t </g>
\t </g>
</g>
</svg>あなたはコーナーで濃い青色で大きな円を参照して、そのようなことで助けをすべての小さな点でアニメーションが終了すると、ロゴサークルとラップトップアイコンの間にある大きな線が移動します。私はあなたが何を言おうとしているのか理解していることを願っています
更新： これは私が試した最新のスニペットですが、私はその暗い青色の円の動きを作るために、正しく行っておりませんどの部分を確認していません。
私の謝罪：ここ
はどのように見えるか、それは可能性があります。私が投稿した答え（ 'h204.6'を' path-to-trace-3'の 'd'属性に付け加える）は、Firefoxで問題にはならないので、2番目の問題に対処しませんでした私は最初に働いていました。私はその答えを削除します、他の人がこれが完全に解決されたと思っていないようにします。 –