Rendering SVG symbols with text - css

The following file is a work in progress showing 3 lamps, I am trying to show text centered both horizontally and vertically in each lamp. I'm not sure whats happening but only the text for lamp3 is appearing and it is not in the correct location. The other lamps do no show the text at all.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
</defs>
<g id="lamp2" transform="translate(15.0,0.0) scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">CCC</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
<g id="lamp3" transform="translate(100.0,82.0) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">EEE</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
<g id="lamp1" transform="translate(100.0,0.0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
</svg>
I really would like an elegant way of centering the text in the parent group.
JSFiddle: https://jsfiddle.net/8kouys3w/6/


clean up code
Main problem: all shapes are stacked on top of each other
other problem (fixed):
transform="translate(1154.0,0.0) scale(0.25)">There really si no reason to transfrom it that far. And scaling should also not be nesasary since you are doing it on all elements.
Your svg does not have a viewBox. This means it will not scale.
Text: The text displayed was at 0.0 (origin) not any where close to the shapes.
Other (not fixed):
WHY WOULD YOU EVER ROTATE A CIRCLE?
circle transform="rotate(90 320 240)"
Your linear gradients have a stop opacity of 0.988281 Thats a lot of decimals for a opacity really close to 1.
Im going to take a wild gues here and say your code is generated and not coded. So if your having problems with generated code you should fix those issues inside your editor, or learn the basics of svg like viewBox and the text element atleast. That would take less time then posting and answer here.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
</defs>
<g id="lamp2" transform="scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5" />
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">CCC</text>
</g>
<g id="lamp3" transform="translate(100,0) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">EEE</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
<g id="lamp1" transform="translate(200,0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
</svg>


This works...viewBox isn't required.
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop- color="#06d306" />
</linearGradient>
</defs>
<g id="lamp1" transform="translate(100,0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
<g id="lamp2" transform="translate(200,0) scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5" />
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">BBB</text>
</g>
<g id="lamp3" transform="translate(200,100) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">CCC</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
</svg>
To recap...there wasn't anything wrong with the original SVG, all that has been done was to change the values for x and y to 250 and 260.
JSFiddle: https://jsfiddle.net/8kouys3w/12/

Related

How to apply conic gradient to svg stroke?

Is any idea how it can be done?
Expecting this:
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l

The basic idea here is that four rectangles that have there own linear gradient are masked off by a dotted stroke. The gradients overlap overlap each other in the corners so it looks like a continues gradient.
The dotted stroke in mask m1 has rounded line caps and then another mask (m2) is masking off half of the stroke.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"
width="500">
<defs>
<linearGradient id="top">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="DeepSkyBlue"/>
</linearGradient>
<linearGradient id="right" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DeepSkyBlue"/>
<stop offset="50%" stop-color="Green"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="bottom">
<stop offset="10%" stop-color="Red"/>
<stop offset="50%" stop-color="Orange"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="left" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="Red"/>
</linearGradient>
<mask id="m1">
<rect x="4" y="4" rx="20" width="392" height="292"
mask="url(#m2)" stroke="white" stroke-width="8"
stroke-dasharray="5 5 10 5 7 4" stroke-linecap="round"
pathLength="400" filter="url(#distort)" />
</mask>
<mask id="m2">
<rect x="4" y="4" rx="20" width="392" height="292" fill="white" />
</mask>
</defs>
<g mask="url(#m1)">
<rect width="400" height="20" fill="url(#top)"/>
<rect width="20" height="300" x="380" fill="url(#right)"/>
<rect width="400" height="20" y="280" fill="url(#bottom)"/>
<rect width="20" height="300" fill="url(#left)"/>
</g>
</svg>

I was able to implement it with pattern image.
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l

SVG not showing on Mozilla, IOS

This SVG is displayed correctly on Chrome, but disappear on Mozilla and iOS. Could you please give me some insights about what's wrong with it?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="616" viewBox="0 0 450 616" fill="none">
<g filter="url(#filter1_b)" style="
">
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint1_radial)" stroke-width="3.5" style="
/* display: none; */
"/>
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint2_radial)" stroke-width="3.5"/>
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint3_radial)" stroke-width="3.5"/>
</g>
<defs>
<filter id="filter0_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
<filter id="filter1_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1.31579" height="1.31387">
<use xlink:href="#image0" transform="scale(0.00263158 0.00182482)"/>
</pattern>
<linearGradient id="paint0_linear" x1="73.1612" y1="38.0857" x2="463.816" y2="606.864" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(114.681 86.3485) rotate(55.7067) scale(886.206 408.172)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(251.761 296.483) rotate(58.5326) scale(410.938 284.945)">
<stop stop-color="#48E6D8"/>
<stop offset="1" stop-color="#48E6D8" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(414.269 42.5193) rotate(124.907) scale(676.798 469.762)">
<stop stop-color="#002421"/>
<stop offset="0.635417" stop-color="#002421" stop-opacity="0.364583"/>
<stop offset="1" stop-color="#002421" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Sample here: https://codepen.io/burianovata_i/pen/WNoeaLd

As #RobertLongson commented, Firefox does not support BackgroundImage pseudo inputs. So I removed that lines and it worked!

svg objects spin around the circle

I want to build a little animation with SVG and CSS. I create a circle and objects. These objects are should have spinning around circle without spin with eachother.
Here my gif about issue. As you can see it revolves around the circle, but it rotates also it selves. I don't need to spin it selves. How can solve the problem with css ? also I am going to share my css below.
#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>

Simply inherit the same animation and change the direction to reverse:
I have also updated the VueJs icon to move the matrix transform because you will override it by the rotation:
#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>

Animate SVG Circles with Transform Origin

I'm trying to animate 3x Individual Circles within one SVG. I've got them to animate, but they have moved position into the top left corner. This happened when I added the following CSS:
.payment svg * {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
<div class="payment">
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
</g>
</g>
</g>
</svg>
</div>
But without the above CSS, they do not stay in the same position and rotate.
Does anyone know how to keep them in the same position and rotate 360 without moving?
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
</g>
</g>
</g>
</g>
</svg>

main idea - rotation around origin(0,0) before translation:
<svg viewBox="-200 -100 400 200" width=90vw>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke-width="1" fill="none">
<g stroke="url(#linearGradient-1)">
<g opacity="0.5" stroke-dasharray="3" transform="translate(-100,0)" >
<circle r="80" >
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g stroke-dasharray="6,10">
<circle r="90">
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g opacity="0.5" stroke-dasharray="16,10" transform="translate(100,0)">
<circle r="100">
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
</g>
</g>
</svg>

Stop-color in CSS/SVG isn't working

So, I have the following code:
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
<style>stop{stop-opacity:1}circle{fill:url(#r)}</style>
<defs>
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ce1126"/>
<stop offset="17%" style="stop-color:#e5911d"/>
<stop offset="33%" style="stop-color:#fcd116"/>
<stop offset="50%" style="stop-color:#18c063"/>
<stop offset="67%" style="stop-color:#75aadb"/>
<stop offset="83%" style="stop-color:#803ac5"/>
<stop offset="100%" style="stop-color:#00335b"/>
</radialGradient>
</defs>
<circle cx="150" cy="300" r="55"/>
</svg>
Interestingly enough, if I add stop-color:attr(c) to the CSS of the stops and change them accordingly (style="stop-color:=>c="), it doesn't work (or at least not in Safari/iOS9). Why is this?

Interesting that Safari does not support this. This seems to work in Firefox:
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
<style>
stop {
stop-opacity: 1
}
circle {
fill: url(#r)
}
</style>
<defs>
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ce1126" />
<stop offset="17%" style="stop-color:#e5911d" />
<stop offset="33%" style="stop-color:#fcd116" />
<stop offset="50%" style="stop-color:#18c063" />
<stop offset="67%" style="stop-color:#75aadb" />
<stop offset="83%" style="stop-color:#803ac5" />
<stop offset="100%" style="stop-color:#00335b" />
</radialGradient>
</defs>
<circle cx="60" cy="100" r="55" fill="url(#r)" />
</svg>
I would not recomend doing it in that way.
The most supported way should be:
Add stop-color as an attribute
Add a class or id to the stop element and add a stop-color with css.

This is should be an easy way, which will works in all browsers
<stop offset="0%" style={{ stopColor: '#ce1126' }}/>
<stop offset="17%" style={{ stopColor: '#e5911d' }}/>
<stop offset="33%" style={{ stopColor: '#fcd116' }}/>
<stop offset="50%" style={{ stopColor: '#18c063' }}/>
<stop offset="67%" style={{ stopColor: '#75aadb' }}/>
<stop offset="83%" style={{ stopColor: '#803ac5' }}/>
<stop offset="100%" style={{ stopColor: '#00335b' }}/>

Resources