SVG animateMotion持续时间无法正常工作

时间:2016-05-20 14:41:55

标签: svg

我希望深蓝色点以相同的速度运行且持续时间相同仍然有一个点稍晚,我也希望在徽标的圆圈之后所有的点将组合成一个大点然后移动到笔记本电脑图标。

这是我试过的... 请帮助

这是片段

<?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"
	 viewBox="0 0 970 570" style="enable-background:new 0 0 970 570;" xml:space="preserve">
<defs>
<style type="text/css">
	.st0{fill:none;stroke:#303D4F;stroke-miterlimit:10;}
	.st1{fill:#21A8E0;}
	.st2{fill:#FFFFFF;}
	.st3{font-family:'Lato-Light';}
	.st4{font-size:16px;}
	.st5{fill:#303D4F;stroke:#303D4F;stroke-miterlimit:10;}
	.st6{fill:#6EC5E0;}
	.st7{fill:#DDE9F1;}
	.st8{fill:none;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st9{fill:#FFFFFF;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st10{fill:#FAFBFC;stroke:#303D4F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st11{fill:#303D4F;}
	path {
	    stroke-dasharray: 1093.92, 1093.92;
	    stroke-dashoffset: 0;
	    transition-timing-function: linear;
	    transition-duration: 2.5s;
	    transition-delay: 0.5s;
	    animation-duration: 2.5s;
	}
</style>
</defs>
<g>
	<g>
		<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"/>
		<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"/>
		<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"/>
		<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"/>
		<path fill="none" stroke="none" stroke-miterlimit="10" d="M0,0h204.6" id="last-path"></path>
		<line fill="none" stroke="#303D4F" stroke-miterlimit="10" x1="440.3" y1="295.2" x2="819" y2="295.2"></line>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 80.6445 205.3301)" class="st2 st3 st4">Trade</text>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 110.1387 429.3643)" class="st2 st3 st4">Derivatives</text>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 220.1895 150.3301)" class="st2 st3 st4">Macro-economics</text>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 101.3477 86.4922)" class="st2 st3 st4">Supply v/s demand</text>
		<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"/>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 167.916 495.042)" class="st2 st3 st4">Financial markets</text>
		<g>
			<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"/>
		</g>
		<text transform="matrix(1 0 0 1 267.4238 412.1934)" class="st2 st3 st4">Geo politics</text>
		<path class="st0" d="M467.9,347.7H311c-4,0-7.2,3.2-7.2,7.2v29.4" id="path-to-trace-5"/>
		<circle fill="#313c50" cx="" cy="" r="6.7">
			 <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite"  keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-1"></mpath>
			    </animateMotion>
			</circle>
			<circle fill="#313c50" cx="" cy="" r="6.7">
				 <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-2"></mpath>
			    </animateMotion>
			</circle>
			<circle fill="#313c50" cx="" cy="" r="6.7">
				 <animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" calcMode="linear" rotate="auto">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-3"></mpath>
			    </animateMotion>
			</circle>
			<circle fill="#313c50" cx="" cy="" r="6.7">
				<animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-6"></mpath>
			    </animateMotion>
			</circle>
			<circle fill="#313c50" cx=" " cy="" r="6.7">
				<animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-4"></mpath>
			    </animateMotion>
			</circle>
			<circle fill="#313c50" cx="" cy="" r="6.7">
				<animateMotion begin="0s;bigCircle.end" dur="4s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear" rotate="auto" id="smallCircle">
			      <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-to-trace-5"></mpath>
			    </animateMotion>
			</circle>
			<circle class="st5" cx="" cy="" r="11.2">
				<animateMotion begin="smallCircle.end-0.5s" dur="4s" calcMode="linear" id="bigCircle">
		          <mpath xlink:href="#last-path"></mpath>
		        </animateMotion>
			</circle>
		<g>
			<circle class="st6" cx="503.9" cy="292" r="79.4"/>
			<g>
				<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
					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"/>
				<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
					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
					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
					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
					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
					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
					c0,1.6,0.3,2.8,0.8,3.6C484.6,304.8,485.4,305.2,486.3,305.2z"/>
				<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
					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
					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
					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
					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
					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
					C508.9,304.7,509.6,305.1,510.5,305.1z"/>
				<path class="st2" d="M526.1,309.3l4.1-33.7h5.5l-4.1,33.7H526.1z"/>
				<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
					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
					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"/>
					
			</g>
		</g>
		<g>
			<g>
				<g>
					<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
						c2.6,0,4.7,2.1,4.7,4.7V346.9z"/>
					<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
						c2.6,0,4.7,2.1,4.7,4.7V346.9z"/>
				</g>
				<rect x="719.5" y="231.1" class="st9" width="166" height="109.5"/>
				<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"/>
				<polygon class="st10" points="829.2,355.3 775.7,355.3 774.6,351.7 830.3,351.7 				"/>
			</g>
			<g>
				<g>
					<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
						C760.2,319.8,759.8,320.2,759.4,320.2z"/>
				</g>
				<g>
					<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
						C850.5,319.8,850.1,320.2,849.7,320.2z"/>
				</g>
				<g>
					<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
						C776.8,319.8,776.4,320.2,775.9,320.2z M767.4,318.5h7.6v-42.2h-7.6V318.5z"/>
				</g>
				<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
					C792.7,319.8,792.3,320.2,791.8,320.2z M783.3,318.5h7.6v-60.7h-7.6V318.5z"/>
				<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
					C808.6,319.8,808.2,320.2,807.7,320.2z M799.2,318.5h7.6v-50.6h-7.6V318.5z"/>
				<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
					C824.5,319.8,824.1,320.2,823.6,320.2z M815.1,318.5h7.6v-35h-7.6V318.5z"/>
				<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
					C841,319.8,840.6,320.2,840.1,320.2z M831.6,318.5h7.6v-44.6h-7.6V318.5z"/>
			</g>
		</g>
	</g>
</g>
</svg>

你会看到角落处有一个深蓝色的大圆圈,当所有小圆点完成动画时会发生类似的事情,那个大圆圈将移动到徽标圈和笔记本电脑图标之间的线上。我希望你明白我想说的是什么。

更新: 这是我尝试的最新片段,但我不确定哪个部分我没有正确地做出那个深蓝色的圆圈。

1 个答案:

答案 0 :(得分:1)

对于第一部分,@ MaxStarkenburg是完全正确的,上面的路径与其他路径没有相同的长度,因此他的点不会花费相同的时间来完成整个旅程。

对于第二部分,我会在第一部分使用animationID.end begin值后开始新动画。

以下是它的外观:

<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" viewBox="0 0 970 570" enable-background="new 0 0 970 570" xml:space="preserve">
  <defs>
    <style>
      path {
        stroke-dasharray: 1093.92, 1093.92;
        stroke-dashoffset: 0;
        transition-timing-function: linear;
        transition-duration: 2.5s;
        transition-delay: 0.5s;
        animation-duration: 2.5s;
      }
    </style>
  </defs>
  <g>
    <g>

      <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M164.2,101.8V242c0,11.9,9.7,21.6,21.6,21.6h282.1l35.9,31.6" id="path-to-trace-1"></path>
      <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M98.7,212v51.1c0,11.9,9.7,21.6,21.6,21.6h347.6l35.9,10.5" id="path-to-trace-2"></path>
      <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M280.7,165.9v70.3c0,4,3.2,7.2,7.2,7.2h180.1l35.9,51.8" id="path-to-trace-3"></path>
      <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M303.8,384.2v-29.4c0-4,3.2-7.2,7.2-7.2h156.9l35.9-52.4" id="path-to-trace-5"></path>
      <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M128.5,402.4V327c0-10.9,9.7-20.6,21.6-20.6h317.8l35.9-11.1" id="path-to-trace-6"></path>
      <path fill="none" stroke="none" stroke-miterlimit="10" d="M0,0h204.6" id="last-path"></path>

      <line fill="none" stroke="#303D4F" stroke-miterlimit="10" x1="440.3" y1="295.2" x2="819" y2="295.2"></line>

      <circle fill="#21A8E0" cx="" cy="" r="6.7">
        <animateMotion begin="0s;bigCircle.end" dur="4s" calcMode="linear" rotate="auto">
          <mpath xlink:href="#path-to-trace-1"></mpath>
        </animateMotion>
      </circle>
      <circle fill="#21A8E0" cx="" cy="" r="6.7">
        <animateMotion begin="0s;bigCircle.end" dur="4s" calcMode="linear" rotate="auto">
          <mpath xlink:href="#path-to-trace-2"></mpath>
        </animateMotion>
      </circle>
      <circle fill="#21A8E0" cx="" cy="" r="6.7">
        <animateMotion begin="0s;bigCircle.end" dur="4s" calcMode="linear" rotate="auto">
          <mpath xlink:href="#path-to-trace-3"></mpath>
        </animateMotion>
      </circle>
      <circle fill="#21A8E0" cx="" cy="" r="6.7">
        <animateMotion begin="0s;bigCircle.end" dur="4s" calcMode="linear" rotate="auto" id="smallCircle">
          <mpath xlink:href="#path-to-trace-5"></mpath>
        </animateMotion>
      </circle>
      <circle fill="#21A8E0" cx="" cy="" r="6.7">
        <animateMotion begin="0s;bigCircle.end" dur="4s" calcMode="linear" rotate="auto">
          <mpath xlink:href="#path-to-trace-6"></mpath>
        </animateMotion>
      </circle>
      <g>
        <circle fill="#6EC5E0" cx="503.9" cy="292" r="79.4"></circle>
        <g>
          <path fill="#FFFFFF" 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
					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"></path>
          <path fill="#FFFFFF" 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
					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
					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
					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
					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
					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
					c0,1.6,0.3,2.8,0.8,3.6C484.6,304.8,485.4,305.2,486.3,305.2z"></path>
          <path fill="#FFFFFF" 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
					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
					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
					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
					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
					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
					C508.9,304.7,509.6,305.1,510.5,305.1z"></path>
          <path fill="#FFFFFF" d="M526.1,309.3l4.1-33.7h5.5l-4.1,33.7H526.1z"></path>
          <path fill="#FFFFFF" 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
					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
					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"></path>
        </g>
        <animateMotion begin="smallCircle.end-0.5s" dur="4s" calcMode="linear" id="bigCircle">
          <mpath xlink:href="#last-path"></mpath>
        </animateMotion>
      </g>
    </g>
    <g>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 80.6445 205.3301)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Trade</text>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 110.1387 429.3643)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Derivatives</text>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 220.1895 150.3301)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Macro-economics</text>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 101.3477 86.4922)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Supply v/s demand</text>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 167.916 495.042)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Financial markets</text>
      <g>
        <path fill="#21A8E0" 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"></path>
      </g>
      <text transform="matrix(1 0 0 1 267.4238 412.1934)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="16px">Geo politics</text>
      <g>
        <g>
          <g>
            <path fill="#DDE9F1" 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
						c2.6,0,4.7,2.1,4.7,4.7V346.9z"></path>

            <path fill="none" stroke="#303D4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 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.5c2.6,0,4.7,2.1,4.7,4.7
						V346.9z"></path>
          </g>

          <rect x="719.5" y="231.1" fill="#FFFFFF" stroke="#303D4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="166" height="109.5"></rect>

          <path fill="#FAFBFC" stroke="#303D4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 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"></path>

          <polygon fill="#FAFBFC" stroke="#303D4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
					829.2,355.3 775.7,355.3 774.6,351.7 830.3,351.7 				"></polygon>
        </g>
        <g>
          <g>
            <path fill="#303D4F" 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
						C760.2,319.8,759.8,320.2,759.4,320.2z"></path>
          </g>
          <g>
            <path fill="#303D4F" 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
						C850.5,319.8,850.1,320.2,849.7,320.2z"></path>
          </g>
          <g>
            <path fill="#303D4F" 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
						C776.8,319.8,776.4,320.2,775.9,320.2z M767.4,318.5h7.6v-42.2h-7.6V318.5z"></path>
          </g>
          <path fill="#303D4F" 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
					C792.7,319.8,792.3,320.2,791.8,320.2z M783.3,318.5h7.6v-60.7h-7.6V318.5z"></path>
          <path fill="#303D4F" 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
					C808.6,319.8,808.2,320.2,807.7,320.2z M799.2,318.5h7.6v-50.6h-7.6V318.5z"></path>
          <path fill="#303D4F" 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
					C824.5,319.8,824.1,320.2,823.6,320.2z M815.1,318.5h7.6v-35h-7.6V318.5z"></path>
          <path fill="#303D4F" 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
					C841,319.8,840.6,320.2,840.1,320.2z M831.6,318.5h7.6v-44.6h-7.6V318.5z"></path>
        </g>
      </g>
    </g>
  </g>
  <path fill="none" stroke="#303D4F" stroke-miterlimit="10" d="M708.5,295.2"></path>
</svg>