svg 物體繞圓旋轉

Question

我想用 SVG 和 CSS 構建一個小 animation。 我創建了一個圓圈和對象。 這些物體應該是繞圈旋轉而不互相旋轉。

這是我關於問題的 gif。 如您所見，它圍繞圓圈旋轉，但它自己也旋轉。 我不需要自己旋轉它。 如何解決 css 的問題？ 我還將在下面分享我的 css。

 #techs { animation: rotate 10s infinite linear; transform-origin: center; transform-box: fill-box; } #moving-objects { animation: scale 15s infinite; transform-origin: center; } #certel { animation: action 1s infinite alternate; } @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } } @keyframes scale { 0% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes action { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }

 <?xml version="1.0" encoding="utf-8"?> <:-- Generator. Adobe Illustrator 16.0,0. SVG Export Plug-In: SVG Version. 6.00 Build 0) --> <:DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http.//www.w3.org/Graphics/SVG/1.1/DTD/svg11:dtd"> <svg version="1.1" xmlns="http.//www:w3:org/2000/svg" xmlns.xlink="http.//www:w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml.space="preserve"> <g id="group-objects"> <circle id="circle" fill="#FFF5EC" cx="252.469" cy="247.273" r="181,496"/> <g id="moving-objects"> <g> <path fill="#EDDCCE" d="M441.256.211,514c-3.053.0-5.537-2.484-5.537-5,538c0-3.054.2,484-5.539.5.537-5,539 c3,055.0,5.539,2.484,5.539.5,539C446.795,209.029,444.311,211.514,441.256.211,514z M441.256.203,097 c-1.586,0-2.877.1,291-2.877,2.878c0,1.587,1.291,2.878,2.877.2,878c1,588.0.2,879-1.291.2.879-2,878 C444.135,204.388,442.844,203.097,441.256.203,097z"/> </g> <g> <path fill="#EDDCCE" d="M317.575.78,994c-3.053.0-5.537-2.484-5.537-5,539c0-3.054.2,484-5.538.5.537-5,538 c3,055.0,5.539,2.484,5.539.5,538C323.114,76.51,320.63,78.994,317.575.78,994z M317.575.70,578 c-1.586,0-2.877.1,291-2.877,2.878c0,1.587,1.291,2.878,2.877.2,878c1,587.0.2,879-1.291.2.879-2,878 C320.454,71.869,319.162,70.578,317.575.70,578z"/> </g> <g> <path fill="#EDDCCE" d="M239.864.96,977c-3.054.0-5.539-2.484-5.539-5.538s2,484-5.538.5.539-5,538 c3,053.0,5.538,2.484,5.538.5,538S242.917,96.977,239.864.96,977z M239.864.88,561c-1.587,0-2.878.1,291-2.878.2,878 s1.291,2.878,2.878.2,878c1,586.0.2,877-1.291.2.877-2,878S241.451,88.561,239.864.88,561z"/> </g> <g> <path fill="#EDDCCE" d="M126.698.113,881c-3.053.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538 c3,054.0,5.539,2.484,5.539.5,538S129.752,113.881,126.698.113,881z M126.698.105,465c-1.586,0-2.878.1,291-2.878.2,878 s1.292,2.878,2.878.2,878c1,587.0.2,878-1.292.2.878-2,878S128.286,105.465,126.698.105,465z"/> </g> <g> <path fill="#EDDCCE" d="M68.601.313,334c-3.054.0-5.539-2.484-5.539-5,537c0-3.054.2,484-5.538.5.539-5,538 c3,054.0,5.538,2.484,5.538.5,538C74.139,310.85,71.655,313.334,68.601.313,334z M68.601.304,919 c-1.587,0-2.878.1,291-2.878,2.878c0,1.586,1.291,2.877,2.878.2,877c1,586.0.2,878-1.291.2.878-2,877 C71.479,306.21,70.188,304.919,68.601.304,919z"/> </g> <g> <path fill="#EDDCCE" d="M142.453.371,532c-3.054.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538 c3,054.0,5.539,2.484,5.539.5,538S145.507,371.532,142.453.371,532z M142.453.363,116c-1.587,0-2.878.1,291-2.878.2,878 s1.291,2.878,2.878.2,878c1,587.0.2,878-1.291.2.878-2,878S144.04,363.116,142.453.363,116z"/> </g> <g> <path fill="#EDDCCE" d="M428.216.293,577c-3.054.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538s5.537,2.484,5.537.5,538 S431.27,293.577,428.216.293,577z M428.216.285,161c-1.587,0-2.878.1,291-2.878.2,878s1.291,2.879,2.878.2,879 c1,586.0.2,878-1.292.2.878-2,879S429.802,285.161,428.216.285,161z"/> </g> <g> <path fill="#EDDCCE" d="M188.008.247,444c-3.054.0-5.538-2.484-5.538-5,539c0-3.053.2,484-5.538.5.538-5,538 s5.538,2.484,5.538.5,538C193.546,244.96,191.062,247.444,188.008.247,444z M188.008.239,028c-1.587,0-2.878.1,291-2.878,2.877 c0,1.587,1.291,2.878,2.878.2.878s2,878-1.291.2.878-2,878C190.886,240.319,189.595,239.028,188.008.239,028z"/> </g> <g> <path fill="#EDDCCE" d="M118.279.205,126c-3.054.0-5.538-2.484-5.538-5.539s2,484-5.538.5.538-5,538s5.538,2.484,5.538.5,538 S121.333,205.126,118.279.205,126z M118.279.196,709c-1.587,0-2.878.1,292-2.878,2.878c0,1.587,1.291,2.878,2.878.2.878 s2,878-1.291.2.878-2,878C121,157.198,119.866,196.709,118.279.196,709z"/> </g> <path fill="#EDDCCE" d="M184.725.82.636h-2.011v-2.01c0-0.735-0.595-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.735,0-1.33.0,596-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C186.055,83.232,185.46,82.636,184.725.82,636z"/> <path fill="#EDDCCE" d="M61.217.239.854h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,595-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1,33 c0,735.0.1,33-0.595.1.33-1.33v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33C62.547,240.45,61.952,239.854,61.217.239,854z"/> <path fill="#EDDCCE" d="M378.659.364.938h-2.012v-2.011c0-0.734-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,596-1.33.1.33v2.011h-2,01 c-0.735,0-1.33.0,596-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,01v2.012c0,0.734,0.596,1.329,1.33.1,329 c0,735.0.1,33-0.595.1.33-1.329v-2.012h2,012c0,734.0.1,33-0.595.1.33-1,33C379.989,365.534,379.394,364.938,378.659.364,938z"/> <path fill="#EDDCCE" d="M324.2.249.286h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1,33c-0.735,0-1.33.0,596-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.734,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1,33 c0,734.0.1,33-0.595.1.33-1.33v-2.011h2,011c0,735.0.1,33-0.596.1.33-1,33C325.53,249.881,324.936,249.286,324.2.249,286z"/> <path fill="#EDDCCE" d="M123.656.255.197h-2.011v-2.011c0-0.734-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,596-1.33.1.33v2.011h-2,01 c-0.735,0-1.33.0,596-1.33.1,33s0.595,1.33,1.33.1.33h2,01v2.011c0,0.735,0.596,1.33,1.33.1,33c0,735.0.1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.596.1.33-1,33S124.391,255.197,123.656.255,197z"/> <path fill="#EDDCCE" d="M73.908.143.06h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.735,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33C75.238,143.655,74.643,143.06,73.908.143,06z"/> <path fill="#EDDCCE" d="M287.073.106.852h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.734,0-1.33.0,596-1.33,1.331c0,0.734,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C288.403,107.447,287.809,106.852,287.073.106,852z"/> <path fill="#EDDCCE" d="M349.033.156.251h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.734,0-1.33.0,596-1.33,1.33c0,0.735,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C350.363,156.847,349.769,156.251,349.033.156,251z"/> <path fill="#EDDCCE" d="M432.86.109.626h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1,33c-0.735,0-1.33.0,596-1.33.1.33v2.011h-2,011 c-0.735,0-1.33.0,595-1.33.1,33s0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1,33c0,734.0.1,33-0.595.1.33-1.33 v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33S433.595,109.626,432.86.109,626z"/> </g> <g id="lines"> <g> <path fill="#FFFFFF" d="M366.524.98.556h-47,592c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,592 c1,801.0,3.261,1.46,3.261.3.261v0,65C369.785,97.096,368.325,98.556,366.524.98,556z"/> <path fill="#FFFFFF" d="M366.524.112.953h-47,592c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,592 c1,801.0,3.261,1.46,3.261.3.261v0,65C369.785,111.493,368.325,112.953,366.524.112,953z"/> <path fill="#FFFFFF" d="M400.321.126.441h-47,593c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,593 c1,801.0,3.261,1.46,3.261.3.261v0,65C403.582,124.981,402.122,126.441,400.321.126,441z"/> <path fill="#FFFFFF" d="M400.321.140.839h-47,593c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,593 c1,801.0,3.261,1.46,3.261.3.261v0,65C403.582,139.379,402.122,140.839,400.321.140,839z"/> </g> <g> <path fill="#FFFFFF" d="M119.749.136.784H79,833c-1.51.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735h39,916 c1,51.0,2.735,1.224,2.735.2.735v0,545C122.483,135.559,121.259,136.784,119.749.136,784z"/> <path fill="#FFFFFF" d="M119.749.148.859H79,833c-1.51.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735h39,916 c1,51.0,2.735,1.224,2.735.2.735v0,545C122.483,147.634,121.259,148.859,119.749.148,859z"/> <path fill="#FFFFFF" d="M148.093.160.171h-39,915c-1.511.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735 h39,915c1,51.0,2.735,1.224,2.735.2.735v0,545C150.828,158.947,149.604,160.171,148.093.160,171z"/> <path fill="#FFFFFF" d="M148.093.172.247h-39,915c-1.511.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735 h39,915c1,51.0,2.735,1.224,2.735.2.735v0,545C150.828,171.022,149.604,172.247,148.093.172,247z"/> </g> <g> <path fill="#FFFFFF" d="M391.822.305.407h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C394.557,304.183,393.332,305.407,391.822.305,407z"/> <path fill="#FFFFFF" d="M391.822.317.482h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C394.557,316.258,393.332,317.482,391.822.317,482z"/> <path fill="#FFFFFF" d="M420.167.328.795h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C422.901,327.57,421.677,328.795,420.167.328,795z"/> <path fill="#FFFFFF" d="M420.167.340.87h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734h39,915 c1,51.0,2.734,1.225,2.734.2.734v0,546C422.901,339.646,421.677,340.87,420.167.340,87z"/> </g> </g> <g id="dots"> <g> <g> <path fill="#D2D2D2" d="M93.147.347,851c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S94.528,347.851,93.147.347,851z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M161.913.347,851c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S163.293,347.851,161.913.347,851z"/> </g> </g> <g> <g> <path fill="#D2D2D2" d="M381.658.179,545c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,051c1,381.0,2.5,1.119,2.5.2,5 S383.039,179.545,381.658.179,545z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M450.424.179,545c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,051c1,381.0,2.5,1.119,2.5.2,5 S451.805,179.545,450.424.179,545z"/> </g> </g> <g> <g> <path fill="#D2D2D2" d="M52.214.196,552c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S53.595,196.552,52.214.196,552z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M120.979.196,552c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S122.36,196.552,120.979.196.552z"/> </g> </g> </g> </g> <g id="relative-circle"> <g id="techs"> <g id="vue_1_" transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"> <g transform="translate(178.06 235.01)"> <path fill="#41B883" d="M177.17-88.916l-3.713-6,429l-3.712.6.429h-12.361l16.073-27,84l16.074.27.84H177.17z"/> </g> <g transform="translate(178.06 235.01)"> <path fill="#34495E" d="M177.17-88.916l-3.713-6,429l-3.712.6.429h-5.931l9.643-16,703l9.645.16.703H177.17z"/> </g> </g> <g id="javascript_1_"> <rect x="228.879" y="45.192" fill="#F7DF1E" width="43.18" height="43,18"/> </g> <g id="node_1_"> <g> </g> <g> <g> <defs> <path id="SVGID_1_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_2_"> <use xlink.href="#SVGID_1_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-47.3394" y1="553.3223" x2="-47.1552" y2="553.3223" gradientTransform="matrix(-38.0649 77.6524 77.6524 38.0649 -44441:9375 -16973.125)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.3288" style="stop-color:#418B3D"/> <stop offset="0.6352" style="stop-color:#419637"/> <stop offset="0:9319" style="stop-color.#3FA92D"/> <stop offset="1" style="stop-color,#3FAE2A"/> </linearGradient> <polygon clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" points="340.113.413,35 328.896.436,233 307.019.425,51 318.237.402,625 "/> </g> <g> <defs> <path id="SVGID_4_" d="M315.058.424,461c0.074,0.097,0.167,0.18,0.276.0,242l6.66.3,847l1.109.0,638 c0.165,0.096,0.355,0.137,0.541.0.123c0,062-0.006.0,123-0.017.0.185-0.035l8.187-14.992 c-0.063-0.067-0.135-0.125-0.218-0.174l-5.084-2.934l-2.687-1.546c-0.076-0.045-0.157-0.077-0.243-0,098L315.058:424.461z"/> </defs> <clipPath id="SVGID_5_"> <use xlink.href="#SVGID_4_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-48.9995" y1="549.2754" x2="-48.8151" y2="549.2754" gradientTransform="matrix(106.8073 -78.9149 -78.9149 -106.8073 48901:8438 55220.25)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.1376" style="stop-color:#41873F"/> <stop offset="0.4032" style="stop-color:#54A044"/> <stop offset="0.7136" style="stop-color:#66B848"/> <stop offset="0:9081" style="stop-color.#6CC04A"/> <stop offset="1" style="stop-color,#6CC04A"/> </linearGradient> <polygon clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" points="305.6.416,521 326.028.401,428 341.476.422,335 321.046.437,43 "/> </g> <g> <defs> <path id="SVGID_7_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_8_"> <use xlink,href="#SVGID_7_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_8_)"> <defs> <polygon id="SVGID_9_" points="322.84.407,982 322.733.408,043 322.876:408.043 "/> </defs> <clipPath id="SVGID_10_"> <use xlink.href="#SVGID_9_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-47.2485" y1="548.5449" x2="-47.061" y2="548.5449" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53845.625)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="322.733" y="407.982" clip-path="url(#SVGID_10_)" fill="url(#SVGID_11_)" width="0.143" height="0,061"/> </g> </g> <g> <defs> <path id="SVGID_12_" d="M323.473.409,509c-0.13.0,013-0.257.0,054-0.374.0,121l-7.743.4,468l8.348.15.205 c0,116-0.016.0,228-0.055.0.334-0.115l7.763-4.484c0,239-0.139.0,403-0.374.0.453-0.641l-8.511-14.539 c-0.062-0.012-0.127-0.018-0.19-0,018C323.524,409.506,323.499,409.507,323.473:409.509"/> </defs> <clipPath id="SVGID_13_"> <use xlink.href="#SVGID_12_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-47.2471" y1="549.0625" x2="-47.0628" y2="549.0625" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53907.4375)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="315.355" y="409.506" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" width="16.897" height="19,797"/> </g> <g> <defs> <path id="SVGID_15_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_16_"> <use xlink,href="#SVGID_15_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_16_)"> <defs> <polygon id="SVGID_17_" points="332.543.424,559 332.492.424,471 332.492:424.589 "/> </defs> <clipPath id="SVGID_18_"> <use xlink.href="#SVGID_17_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-47.2295" y1="549.2949" x2="-47.0628" y2="549.2949" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53935.25)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="332.492" y="424.471" clip-path="url(#SVGID_18_)" fill="url(#SVGID_19_)" width="0.051" height="0,118"/> </g> </g> <g> <defs> <path id="SVGID_20_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_21_"> <use xlink,href="#SVGID_20_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_21_)"> <defs> <path id="SVGID_22_" d="M331.818.424,703l-7.772.4,484c-0.106.0,063-0.223.0,101-0.343.0,117l0.155.0.281l8.634-4.997v-0.118 l-0.214-0,365C332.215,424.355,332.045,424.572,331.818:424.703"/> </defs> <clipPath id="SVGID_23_"> <use xlink.href="#SVGID_22_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-47.2476" y1="549.4014" x2="-47.0629" y2="549.4014" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53947.875)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="323.703" y="424.105" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" width="8.789" height="5,48"/> </g> </g> <g> <defs> <path id="SVGID_25_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_26_"> <use xlink,href="#SVGID_25_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_26_)"> <defs> <path id="SVGID_27_" d="M331.818.424,703l-7.772.4,484c-0.106.0,063-0.223.0,101-0.343.0,117l0.155.0.281l8.634-4.997v-0.118 l-0.214-0,365C332.215,424.355,332.045,424.572,331.818:424.703"/> </defs> <clipPath id="SVGID_28_"> <use xlink.href="#SVGID_27_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="-47.8159" y1="552.2285" x2="-47.6316" y2="552.2285" gradientTransform="matrix(-60.0806 122.5644 122.5644 60.0806 -70221:4688 -26905.375)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.3288" style="stop-color:#418B3D"/> <stop offset="0.6352" style="stop-color:#419637"/> <stop offset="0:9319" style="stop-color.#3FA92D"/> <stop offset="1" style="stop-color,#3FAE2A"/> </linearGradient> <polygon clip-path="url(#SVGID_28_)" fill="url(#SVGID_29_)" points="334.656.425,168 330.788.433,06 321.537.428,524 325.405.420.633 "/> </g> </g> </g> </g> <g id="gridsome_1_"> <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="417.623" y1="189.8169" x2="417.623" y2="167.5225" gradientTransform="matrix(1 0 0 -1 8:3999 477:04)"> <stop offset="0" style="stop-color.#00583E"/> <stop offset="1" style="stop-color,#00835C"/> </linearGradient> <path fill="url(#SVGID_30_)" d="M441.284.287.41c1,816-0.088,3.425,1.321,3.581.3,139c0.68.8,795-7.369.18,647-18.712.18,963 c-9.559.0.236-19.012-7.416-19.012-18,987c0-1.823.1,507-3.302.3.325-3,302s3.292,1.479,3.292,3.302 c0,7.61,6.12,12.536,12.232.12.386c7,524-0.209.12,417-6.725.12.162-12,045C438.066,289.045,439.469,287.497,441.284.287,41z"/> <path fill="#00A672" d="M433.059.290,78c0-1.867.1,523-3.38.3.401-3.38h4,957c1,879.0,3.448,1.513,3.448.3,38 s-1.569.3,38-3.448.3.38h-4,957C434.582,294.16,433.059,292.647,433.059.290,78z"/> <path fill="#00A672" d="M422.658.290,785c0-1.869.1,514-3.385.3.378-3,385s3.378,1.516,3.378.3,385s-1.514.3,385-3.378.3,385 S422.658,292.654,422.658.290,785z"/> <path fill="#00A672" d="M429.32.274,969c0.075.1,821-1.336.3,359-3.153.3,436c-7.844.0,326-12.632.6,491-12.398.12,345 c0.072.1,821-1.313.3,358-3.13.3,431c-1.816.0.072-3.414-1.398-3.487-3.22c-0,379-9.538.7,563-18.968.18.742-19,153 C427.711,271.73,429.245,273.146,429.32.274,969z"/> </g> <g id="gatsby_1_"> <path fill="#744C9E" d="M73.522.272,766c-9.883,0-17.895.8,012-17.895.17,895s8.012,17.895,17.895.17.895 s17,895-8.012.17.895-17,895S83.405,272.766,73.522.272,766z M59.473.290,846l13.864.13,863 C65.724,304.609,59.572,298.459,59.473.290,846z M76.667.304.357l-16.843-16.844c1,429-6.246.7,019-10.906.13.698-10,906 c4,669.0,8.806,2.277,11.36.5,781l-1.945.1.717c-2.073-2.971-5.517-4.918-9.415-4,918c-4.964,0-9.191.3,154-10.788.7,566 l14.694.14.693c3,568-1.291.6,313-4.305.7.232-8.035H78.57v-2,752h6.423l0,0h2.581l0,0 C87.574,297.338,82.914,302.93,76.667,304.357z"/> </g> </g> </g> </svg>

Answer 1

只需繼承相同的 animation 並將方向更改為反向：

我還更新了 VueJs 圖標以移動矩陣變換，因為您將通過旋轉覆蓋它：

 #techs { animation: rotate 10s infinite linear; transform-origin: center; transform-box: fill-box; } #moving-objects { animation: scale 15s infinite; transform-origin: center; } /* added this */ #techs > * { animation: inherit; animation-direction:reverse; transform-origin: inherit; transform-box: inherit; } /**/ @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } } @keyframes scale { 0% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes action { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }

 <?xml version="1.0" encoding="utf-8"?> <:-- Generator. Adobe Illustrator 16.0,0. SVG Export Plug-In: SVG Version. 6.00 Build 0) --> <:DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http.//www.w3.org/Graphics/SVG/1.1/DTD/svg11:dtd"> <svg version="1.1" xmlns="http.//www:w3:org/2000/svg" xmlns.xlink="http.//www:w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml.space="preserve"> <g id="group-objects"> <circle id="circle" fill="#FFF5EC" cx="252.469" cy="247.273" r="181,496"/> <g id="moving-objects"> <g> <path fill="#EDDCCE" d="M441.256.211,514c-3.053.0-5.537-2.484-5.537-5,538c0-3.054.2,484-5.539.5.537-5,539 c3,055.0,5.539,2.484,5.539.5,539C446.795,209.029,444.311,211.514,441.256.211,514z M441.256.203,097 c-1.586,0-2.877.1,291-2.877,2.878c0,1.587,1.291,2.878,2.877.2,878c1,588.0.2,879-1.291.2.879-2,878 C444.135,204.388,442.844,203.097,441.256.203,097z"/> </g> <g> <path fill="#EDDCCE" d="M317.575.78,994c-3.053.0-5.537-2.484-5.537-5,539c0-3.054.2,484-5.538.5.537-5,538 c3,055.0,5.539,2.484,5.539.5,538C323.114,76.51,320.63,78.994,317.575.78,994z M317.575.70,578 c-1.586,0-2.877.1,291-2.877,2.878c0,1.587,1.291,2.878,2.877.2,878c1,587.0.2,879-1.291.2.879-2,878 C320.454,71.869,319.162,70.578,317.575.70,578z"/> </g> <g> <path fill="#EDDCCE" d="M239.864.96,977c-3.054.0-5.539-2.484-5.539-5.538s2,484-5.538.5.539-5,538 c3,053.0,5.538,2.484,5.538.5,538S242.917,96.977,239.864.96,977z M239.864.88,561c-1.587,0-2.878.1,291-2.878.2,878 s1.291,2.878,2.878.2,878c1,586.0.2,877-1.291.2.877-2,878S241.451,88.561,239.864.88,561z"/> </g> <g> <path fill="#EDDCCE" d="M126.698.113,881c-3.053.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538 c3,054.0,5.539,2.484,5.539.5,538S129.752,113.881,126.698.113,881z M126.698.105,465c-1.586,0-2.878.1,291-2.878.2,878 s1.292,2.878,2.878.2,878c1,587.0.2,878-1.292.2.878-2,878S128.286,105.465,126.698.105,465z"/> </g> <g> <path fill="#EDDCCE" d="M68.601.313,334c-3.054.0-5.539-2.484-5.539-5,537c0-3.054.2,484-5.538.5.539-5,538 c3,054.0,5.538,2.484,5.538.5,538C74.139,310.85,71.655,313.334,68.601.313,334z M68.601.304,919 c-1.587,0-2.878.1,291-2.878,2.878c0,1.586,1.291,2.877,2.878.2,877c1,586.0.2,878-1.291.2.878-2,877 C71.479,306.21,70.188,304.919,68.601.304,919z"/> </g> <g> <path fill="#EDDCCE" d="M142.453.371,532c-3.054.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538 c3,054.0,5.539,2.484,5.539.5,538S145.507,371.532,142.453.371,532z M142.453.363,116c-1.587,0-2.878.1,291-2.878.2,878 s1.291,2.878,2.878.2,878c1,587.0.2,878-1.291.2.878-2,878S144.04,363.116,142.453.363,116z"/> </g> <g> <path fill="#EDDCCE" d="M428.216.293,577c-3.054.0-5.538-2.484-5.538-5.538s2,484-5.538.5.538-5,538s5.537,2.484,5.537.5,538 S431.27,293.577,428.216.293,577z M428.216.285,161c-1.587,0-2.878.1,291-2.878.2,878s1.291,2.879,2.878.2,879 c1,586.0.2,878-1.292.2.878-2,879S429.802,285.161,428.216.285,161z"/> </g> <g> <path fill="#EDDCCE" d="M188.008.247,444c-3.054.0-5.538-2.484-5.538-5,539c0-3.053.2,484-5.538.5.538-5,538 s5.538,2.484,5.538.5,538C193.546,244.96,191.062,247.444,188.008.247,444z M188.008.239,028c-1.587,0-2.878.1,291-2.878,2.877 c0,1.587,1.291,2.878,2.878.2.878s2,878-1.291.2.878-2,878C190.886,240.319,189.595,239.028,188.008.239,028z"/> </g> <g> <path fill="#EDDCCE" d="M118.279.205,126c-3.054.0-5.538-2.484-5.538-5.539s2,484-5.538.5.538-5,538s5.538,2.484,5.538.5,538 S121.333,205.126,118.279.205,126z M118.279.196,709c-1.587,0-2.878.1,292-2.878,2.878c0,1.587,1.291,2.878,2.878.2.878 s2,878-1.291.2.878-2,878C121,157.198,119.866,196.709,118.279.196,709z"/> </g> <path fill="#EDDCCE" d="M184.725.82.636h-2.011v-2.01c0-0.735-0.595-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.735,0-1.33.0,596-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C186.055,83.232,185.46,82.636,184.725.82,636z"/> <path fill="#EDDCCE" d="M61.217.239.854h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,595-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1,33 c0,735.0.1,33-0.595.1.33-1.33v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33C62.547,240.45,61.952,239.854,61.217.239,854z"/> <path fill="#EDDCCE" d="M378.659.364.938h-2.012v-2.011c0-0.734-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,596-1.33.1.33v2.011h-2,01 c-0.735,0-1.33.0,596-1.33,1.33c0,0.735,0.595,1.33,1.33.1.33h2,01v2.012c0,0.734,0.596,1.329,1.33.1,329 c0,735.0.1,33-0.595.1.33-1.329v-2.012h2,012c0,734.0.1,33-0.595.1.33-1,33C379.989,365.534,379.394,364.938,378.659.364,938z"/> <path fill="#EDDCCE" d="M324.2.249.286h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1,33c-0.735,0-1.33.0,596-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.734,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1,33 c0,734.0.1,33-0.595.1.33-1.33v-2.011h2,011c0,735.0.1,33-0.596.1.33-1,33C325.53,249.881,324.936,249.286,324.2.249,286z"/> <path fill="#EDDCCE" d="M123.656.255.197h-2.011v-2.011c0-0.734-0.595-1.33-1.33-1,33c-0.734,0-1.33.0,596-1.33.1.33v2.011h-2,01 c-0.735,0-1.33.0,596-1.33.1,33s0.595,1.33,1.33.1.33h2,01v2.011c0,0.735,0.596,1.33,1.33.1,33c0,735.0.1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.596.1.33-1,33S124.391,255.197,123.656.255,197z"/> <path fill="#EDDCCE" d="M73.908.143.06h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.011h-2,011 c-0.734,0-1.33.0,595-1.33,1.33c0,0.735,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33C75.238,143.655,74.643,143.06,73.908.143,06z"/> <path fill="#EDDCCE" d="M287.073.106.852h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.734,0-1.33.0,596-1.33,1.331c0,0.734,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C288.403,107.447,287.809,106.852,287.073.106,852z"/> <path fill="#EDDCCE" d="M349.033.156.251h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1,33s-1.33.0,595-1.33.1.33v2.01h-2,011 c-0.734,0-1.33.0,596-1.33,1.33c0,0.735,0.596,1.33,1.33.1.33h2,011v2.011c0,0.735,0.596,1.33,1.33.1.33s1,33-0.595.1.33-1.33 v-2.011h2,011c0,735.0.1,33-0.595.1.33-1,33C350.363,156.847,349.769,156.251,349.033.156,251z"/> <path fill="#EDDCCE" d="M432.86.109.626h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1,33c-0.735,0-1.33.0,596-1.33.1.33v2.011h-2,011 c-0.735,0-1.33.0,595-1.33.1,33s0.595,1.33,1.33.1.33h2,011v2.011c0,0.735,0.595,1.33,1.33.1,33c0,734.0.1,33-0.595.1.33-1.33 v-2.011h2,011c0,734.0.1,33-0.595.1.33-1,33S433.595,109.626,432.86.109,626z"/> </g> <g id="lines"> <g> <path fill="#FFFFFF" d="M366.524.98.556h-47,592c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,592 c1,801.0,3.261,1.46,3.261.3.261v0,65C369.785,97.096,368.325,98.556,366.524.98,556z"/> <path fill="#FFFFFF" d="M366.524.112.953h-47,592c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,592 c1,801.0,3.261,1.46,3.261.3.261v0,65C369.785,111.493,368.325,112.953,366.524.112,953z"/> <path fill="#FFFFFF" d="M400.321.126.441h-47,593c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,593 c1,801.0,3.261,1.46,3.261.3.261v0,65C403.582,124.981,402.122,126.441,400.321.126,441z"/> <path fill="#FFFFFF" d="M400.321.140.839h-47,593c-1.801.0-3.261-1.46-3.261-3.261v-0,65c0-1.801.1,46-3.261.3.261-3.261h47,593 c1,801.0,3.261,1.46,3.261.3.261v0,65C403.582,139.379,402.122,140.839,400.321.140,839z"/> </g> <g> <path fill="#FFFFFF" d="M119.749.136.784H79,833c-1.51.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735h39,916 c1,51.0,2.735,1.224,2.735.2.735v0,545C122.483,135.559,121.259,136.784,119.749.136,784z"/> <path fill="#FFFFFF" d="M119.749.148.859H79,833c-1.51.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735h39,916 c1,51.0,2.735,1.224,2.735.2.735v0,545C122.483,147.634,121.259,148.859,119.749.148,859z"/> <path fill="#FFFFFF" d="M148.093.160.171h-39,915c-1.511.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735 h39,915c1,51.0,2.735,1.224,2.735.2.735v0,545C150.828,158.947,149.604,160.171,148.093.160,171z"/> <path fill="#FFFFFF" d="M148.093.172.247h-39,915c-1.511.0-2.735-1.225-2.735-2.735v-0,545c0-1.511.1,225-2.735.2.735-2.735 h39,915c1,51.0,2.735,1.224,2.735.2.735v0,545C150.828,171.022,149.604,172.247,148.093.172,247z"/> </g> <g> <path fill="#FFFFFF" d="M391.822.305.407h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C394.557,304.183,393.332,305.407,391.822.305,407z"/> <path fill="#FFFFFF" d="M391.822.317.482h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C394.557,316.258,393.332,317.482,391.822.317,482z"/> <path fill="#FFFFFF" d="M420.167.328.795h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734 h39,915c1,51.0,2.734,1.225,2.734.2.734v0,546C422.901,327.57,421.677,328.795,420.167.328,795z"/> <path fill="#FFFFFF" d="M420.167.340.87h-39,915c-1.511.0-2.735-1.225-2.735-2.734v-0,546c0-1.51.1,225-2.734.2.735-2.734h39,915 c1,51.0,2.734,1.225,2.734.2.734v0,546C422.901,339.646,421.677,340.87,420.167.340,87z"/> </g> </g> <g id="dots"> <g> <g> <path fill="#D2D2D2" d="M93.147.347,851c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S94.528,347.851,93.147.347,851z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M161.913.347,851c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S163.293,347.851,161.913.347,851z"/> </g> </g> <g> <g> <path fill="#D2D2D2" d="M381.658.179,545c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,051c1,381.0,2.5,1.119,2.5.2,5 S383.039,179.545,381.658.179,545z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M450.424.179,545c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,051c1,381.0,2.5,1.119,2.5.2,5 S451.805,179.545,450.424.179,545z"/> </g> </g> <g> <g> <path fill="#D2D2D2" d="M52.214.196,552c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S53.595,196.552,52.214.196,552z"/> </g> <g> </g> <g> <path fill="#D2D2D2" d="M120.979.196,552c-1.381.0-2.525-1.119-2.525-2.5s1,094-2.5.2.475-2.5h0,05c1,381.0,2.5,1.119,2.5.2,5 S122.36,196.552,120.979.196.552z"/> </g> </g> </g> </g> <g id="relative-circle"> <g id="techs"> <g id="vue_1_" > <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)"> <path fill="#41B883" d="M177.17-88.916l-3.713-6,429l-3.712.6.429h-12.361l16.073-27,84l16.074.27.84H177.17z"/> </g> <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)"> <path fill="#34495E" d="M177.17-88.916l-3.713-6,429l-3.712.6.429h-5.931l9.643-16,703l9.645.16.703H177.17z"/> </g> </g> <g id="javascript_1_"> <rect x="228.879" y="45.192" fill="#F7DF1E" width="43.18" height="43,18"/> </g> <g id="node_1_"> <g> </g> <g> <g> <defs> <path id="SVGID_1_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_2_"> <use xlink.href="#SVGID_1_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-47.3394" y1="553.3223" x2="-47.1552" y2="553.3223" gradientTransform="matrix(-38.0649 77.6524 77.6524 38.0649 -44441:9375 -16973.125)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.3288" style="stop-color:#418B3D"/> <stop offset="0.6352" style="stop-color:#419637"/> <stop offset="0:9319" style="stop-color.#3FA92D"/> <stop offset="1" style="stop-color,#3FAE2A"/> </linearGradient> <polygon clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" points="340.113.413,35 328.896.436,233 307.019.425,51 318.237.402,625 "/> </g> <g> <defs> <path id="SVGID_4_" d="M315.058.424,461c0.074,0.097,0.167,0.18,0.276.0,242l6.66.3,847l1.109.0,638 c0.165,0.096,0.355,0.137,0.541.0.123c0,062-0.006.0,123-0.017.0.185-0.035l8.187-14.992 c-0.063-0.067-0.135-0.125-0.218-0.174l-5.084-2.934l-2.687-1.546c-0.076-0.045-0.157-0.077-0.243-0,098L315.058:424.461z"/> </defs> <clipPath id="SVGID_5_"> <use xlink.href="#SVGID_4_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-48.9995" y1="549.2754" x2="-48.8151" y2="549.2754" gradientTransform="matrix(106.8073 -78.9149 -78.9149 -106.8073 48901:8438 55220.25)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.1376" style="stop-color:#41873F"/> <stop offset="0.4032" style="stop-color:#54A044"/> <stop offset="0.7136" style="stop-color:#66B848"/> <stop offset="0:9081" style="stop-color.#6CC04A"/> <stop offset="1" style="stop-color,#6CC04A"/> </linearGradient> <polygon clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" points="305.6.416,521 326.028.401,428 341.476.422,335 321.046.437,43 "/> </g> <g> <defs> <path id="SVGID_7_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_8_"> <use xlink,href="#SVGID_7_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_8_)"> <defs> <polygon id="SVGID_9_" points="322.84.407,982 322.733.408,043 322.876:408.043 "/> </defs> <clipPath id="SVGID_10_"> <use xlink.href="#SVGID_9_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-47.2485" y1="548.5449" x2="-47.061" y2="548.5449" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53845.625)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="322.733" y="407.982" clip-path="url(#SVGID_10_)" fill="url(#SVGID_11_)" width="0.143" height="0,061"/> </g> </g> <g> <defs> <path id="SVGID_12_" d="M323.473.409,509c-0.13.0,013-0.257.0,054-0.374.0,121l-7.743.4,468l8.348.15.205 c0,116-0.016.0,228-0.055.0.334-0.115l7.763-4.484c0,239-0.139.0,403-0.374.0.453-0.641l-8.511-14.539 c-0.062-0.012-0.127-0.018-0.19-0,018C323.524,409.506,323.499,409.507,323.473:409.509"/> </defs> <clipPath id="SVGID_13_"> <use xlink.href="#SVGID_12_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-47.2471" y1="549.0625" x2="-47.0628" y2="549.0625" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53907.4375)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="315.355" y="409.506" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" width="16.897" height="19,797"/> </g> <g> <defs> <path id="SVGID_15_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_16_"> <use xlink,href="#SVGID_15_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_16_)"> <defs> <polygon id="SVGID_17_" points="332.543.424,559 332.492.424,471 332.492:424.589 "/> </defs> <clipPath id="SVGID_18_"> <use xlink.href="#SVGID_17_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-47.2295" y1="549.2949" x2="-47.0628" y2="549.2949" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53935.25)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="332.492" y="424.471" clip-path="url(#SVGID_18_)" fill="url(#SVGID_19_)" width="0.051" height="0,118"/> </g> </g> <g> <defs> <path id="SVGID_20_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_21_"> <use xlink,href="#SVGID_20_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_21_)"> <defs> <path id="SVGID_22_" d="M331.818.424,703l-7.772.4,484c-0.106.0,063-0.223.0,101-0.343.0,117l0.155.0.281l8.634-4.997v-0.118 l-0.214-0,365C332.215,424.355,332.045,424.572,331.818:424.703"/> </defs> <clipPath id="SVGID_23_"> <use xlink.href="#SVGID_22_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-47.2476" y1="549.4014" x2="-47.0629" y2="549.4014" gradientTransform="matrix(97.417 0 0 -97.417 4917:3125 53947.875)"> <stop offset="0" style="stop-color:#6CC04A"/> <stop offset="0.0919" style="stop-color:#6CC04A"/> <stop offset="0.2864" style="stop-color:#66B848"/> <stop offset="0.5968" style="stop-color:#54A044"/> <stop offset="0:8624" style="stop-color.#41873F"/> <stop offset="1" style="stop-color.#41873F"/> </linearGradient> <rect x="323.703" y="424.105" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" width="8.789" height="5,48"/> </g> </g> <g> <defs> <path id="SVGID_25_" d="M323.099.409,63l-7.765.4,479c-0.29.0,169-0.468.0,479-0.468.0,813v8.969 c0,0.335,0.178,0.645,0.468.0,813l7.765.4,484c0.29,0.168,0.647,0.168,0.938.0l7.763-4.484 c0,29-0.168.0,468-0.478.0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479 c-0.146-0.085-0.309-0.126-0.471-0,126C323.405,409.504,323.243,409.545,323.099:409.63"/> </defs> <clipPath id="SVGID_26_"> <use xlink,href="#SVGID_25_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_26_)"> <defs> <path id="SVGID_27_" d="M331.818.424,703l-7.772.4,484c-0.106.0,063-0.223.0,101-0.343.0,117l0.155.0.281l8.634-4.997v-0.118 l-0.214-0,365C332.215,424.355,332.045,424.572,331.818:424.703"/> </defs> <clipPath id="SVGID_28_"> <use xlink.href="#SVGID_27_" overflow="visible"/> </clipPath> <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="-47.8159" y1="552.2285" x2="-47.6316" y2="552.2285" gradientTransform="matrix(-60.0806 122.5644 122.5644 60.0806 -70221:4688 -26905.375)"> <stop offset="0" style="stop-color:#41873F"/> <stop offset="0.3288" style="stop-color:#418B3D"/> <stop offset="0.6352" style="stop-color:#419637"/> <stop offset="0:9319" style="stop-color.#3FA92D"/> <stop offset="1" style="stop-color,#3FAE2A"/> </linearGradient> <polygon clip-path="url(#SVGID_28_)" fill="url(#SVGID_29_)" points="334.656.425,168 330.788.433,06 321.537.428,524 325.405.420.633 "/> </g> </g> </g> </g> <g id="gridsome_1_"> <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="417.623" y1="189.8169" x2="417.623" y2="167.5225" gradientTransform="matrix(1 0 0 -1 8:3999 477:04)"> <stop offset="0" style="stop-color.#00583E"/> <stop offset="1" style="stop-color,#00835C"/> </linearGradient> <path fill="url(#SVGID_30_)" d="M441.284.287.41c1,816-0.088,3.425,1.321,3.581.3,139c0.68.8,795-7.369.18,647-18.712.18,963 c-9.559.0.236-19.012-7.416-19.012-18,987c0-1.823.1,507-3.302.3.325-3,302s3.292,1.479,3.292,3.302 c0,7.61,6.12,12.536,12.232.12.386c7,524-0.209.12,417-6.725.12.162-12,045C438.066,289.045,439.469,287.497,441.284.287,41z"/> <path fill="#00A672" d="M433.059.290,78c0-1.867.1,523-3.38.3.401-3.38h4,957c1,879.0,3.448,1.513,3.448.3,38 s-1.569.3,38-3.448.3.38h-4,957C434.582,294.16,433.059,292.647,433.059.290,78z"/> <path fill="#00A672" d="M422.658.290,785c0-1.869.1,514-3.385.3.378-3,385s3.378,1.516,3.378.3,385s-1.514.3,385-3.378.3,385 S422.658,292.654,422.658.290,785z"/> <path fill="#00A672" d="M429.32.274,969c0.075.1,821-1.336.3,359-3.153.3,436c-7.844.0,326-12.632.6,491-12.398.12,345 c0.072.1,821-1.313.3,358-3.13.3,431c-1.816.0.072-3.414-1.398-3.487-3.22c-0,379-9.538.7,563-18.968.18.742-19,153 C427.711,271.73,429.245,273.146,429.32.274,969z"/> </g> <g id="gatsby_1_"> <path fill="#744C9E" d="M73.522.272,766c-9.883,0-17.895.8,012-17.895.17,895s8.012,17.895,17.895.17.895 s17,895-8.012.17.895-17,895S83.405,272.766,73.522.272,766z M59.473.290,846l13.864.13,863 C65.724,304.609,59.572,298.459,59.473.290,846z M76.667.304.357l-16.843-16.844c1,429-6.246.7,019-10.906.13.698-10,906 c4,669.0,8.806,2.277,11.36.5,781l-1.945.1.717c-2.073-2.971-5.517-4.918-9.415-4,918c-4.964,0-9.191.3,154-10.788.7,566 l14.694.14.693c3,568-1.291.6,313-4.305.7.232-8.035H78.57v-2,752h6.423l0,0h2.581l0,0 C87.574,297.338,82.914,302.93,76.667,304.357z"/> </g> </g> </g> </svg>