We Keep Coding

Javascript svg circular gradiant - javascript

I have a problem to solve. I want to draw a circle svg with gradient fonts based on a score. The score varies from 0 to 100. If the score is 60% for example, I have to draw 60% of the circle knowing that the gradient changes every 20%. I would like to do something like the following image but with gradients:
I saw the example below which could be useful to me, but I don't understand how the coordinates of the M in path are calculated:
<svg width="300" height="300">
<linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E00"></stop>
<stop offset="100%" stop-color="#FB0300"></stop>
</linearGradient>
<linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
<path d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none" stroke="url(#linearColors1)" stroke-width="5" />
<path d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none" stroke="url(#linearColors2)" stroke-width="5" />
<path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
fill="none" stroke="url(#linearColors3)" stroke-width="5" />
<path d="M150 250 a120 120 0 0 1 -103.9230 -60"
fill="none" stroke="url(#linearColors4)" stroke-width="5" />
<path d="M46.077 190 a120 120 0 0 1 0 -120"
fill="none" stroke="url(#linearColors5)" stroke-width="5" />
<path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
fill="none" stroke="url(#linearColors6)" stroke-width="5" />
</svg>
Can you help me solve this problem or explain to me the calculation logic of the M in the example above?
Thanks very much !

Instead of using the path element I use a circle and the stroke-dasharray attribute. I create a circle "slice" (1/5 if a circle) and then use <use> for reusing the slice. The value is controlled by a mask (and the stroke-dasharray of a circle).
Each gradient is used on the different use elements. You can see that they are all the same. Basically it fits the initial circle slice. After being applied each circle slice is rotated.
Here is an example of the circle element with the stroke-dasharray and the gradient. I added the gradient to the fill so that you can see what it looks like:
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="lg1" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="DodgerBlue"/>
<stop offset="75%" stop-color="Green"/>
</linearGradient>
</defs>
<g transform="translate(50 50)">
<circle id="c1" r="45" stroke-width="10" fill="url(#lg1)"
stroke="url(#lg1)" stroke-dasharray="0 74 21 20" pathLength="100" />
</g>
</svg>
And this is the end result:
document.forms.form01.range.addEventListener('change', e => {
document.getElementById('c2').setAttribute('stroke-dasharray', `${e.target.value} 200`);
document.getElementById('t1').textContent = `${e.target.value}%`;
});
<form name="form01">
<input type="range" name="range" min="0" max="100" value="71"/>
</form>
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="temp1" gradientTransform="rotate(36) translate(.2 0)"/>
<linearGradient id="lg1" href="#temp1">
<stop offset="25%" stop-color="DodgerBlue"/>
<stop offset="75%" stop-color="Green"/>
</linearGradient>
<linearGradient id="lg2" href="#temp1">
<stop offset="25%" stop-color="Green"/>
<stop offset="75%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="lg3" href="#temp1">
<stop offset="25%" stop-color="Yellow"/>
<stop offset="75%" stop-color="Orange"/>
</linearGradient>
<linearGradient id="lg4" href="#temp1">
<stop offset="25%" stop-color="Orange"/>
<stop offset="75%" stop-color="DarkOrchid"/>
</linearGradient>
<linearGradient id="lg5" href="#temp1">
<stop offset="25%" stop-color="DarkOrchid"/>
<stop offset="75%" stop-color="Red"/>
</linearGradient>
<circle id="c1" r="45" stroke-width="10" fill="none"
stroke-dasharray="0 74 21 20" pathLength="100" />
<mask id="m1">
<circle id="c2" r="45" stroke-width="10" fill="none" stroke="white"
stroke-dasharray="71 100" pathLength="104" transform="rotate(-83)"
stroke-linecap="round" />
</mask>
</defs>
<g transform="translate(50 50)" mask="url(#m1)">
<use href="#c1" stroke="url(#lg1)"/>
<use href="#c1" stroke="url(#lg2)" transform="rotate(72)"/>
<use href="#c1" stroke="url(#lg3)" transform="rotate(144)"/>
<use href="#c1" stroke="url(#lg4)" transform="rotate(216)"/>
<use href="#c1" stroke="url(#lg5)" transform="rotate(288)"/>
</g>
<text id="t1" x="50" y="50" font-family="sans-serif" text-anchor="middle"
dominant-baseline="middle">71%</text>
</svg>

Svgs are quite tricky to just code.
I could not make your circle thicker even in Adobe Illustrator as it breaks the gradient. And the reason for it is that SVG does only support gradient inside a stroke, not along or across.
This also a reason why your annulus (circle) is broken into 6 separate sectors.
So, keep in mind that it will be very hard to come up with general solution because you are using gradient. Every design would need custom implementation
My solution:
I copied and connected all the 6 paths of the circle from your example into one circle. Then broke down it into 100 pieces which would represent the percents and colored it grey.
Then I just put it on top of the gradient circle.
Here is the code for the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 277.7952881 277.7952881" enable-background="new 0 0 277.7952881 277.7952881" xml:space="preserve">
<g id="Layer_2">
<g id="gradient">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-156.1584625" y1="555.276123" x2="-155.1584625" y2="554.276123" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33325.2265625)">
<stop offset="0" style="stop-color:#5CB130"/>
<stop offset="1" style="stop-color:#F2E500"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="5" d="M138.8976288,18.8976383
c42.8718567,0.0000153,82.4870758,22.8718815,103.9230042,60"/>
<linearGradient id="SVGID_00000066511025684526834950000005985987899688685485_" gradientUnits="userSpaceOnUse" x1="-147.1517181" y1="557.5291138" x2="-147.1517181" y2="556.5291138" gradientTransform="matrix(16.0769653 0 0 -120 2632.1657715 66982.390625)">
<stop offset="0" style="stop-color:#F2E500"/>
<stop offset="1" style="stop-color:#EF7D1A"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000066511025684526834950000005985987899688685485_)" stroke-width="5" d="
M242.8206329,78.8976364c21.4359589,37.1281281,21.4359589,82.8718796,0,120.0000076"/>
<linearGradient id="SVGID_00000061460617045725905590000012120539635448511164_" gradientUnits="userSpaceOnUse" x1="-155.1584625" y1="554.9348145" x2="-156.1584625" y2="553.9348145" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33505.2265625)">
<stop offset="0" style="stop-color:#EF7D1A"/>
<stop offset="1" style="stop-color:#E5251E"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000061460617045725905590000012120539635448511164_)" stroke-width="5" d="
M242.8206329,198.897644c-21.4359283,37.1281128-61.0511475,59.9999695-103.9230042,60"/>
<linearGradient id="SVGID_00000087406250813457147340000016349020068421769389_" gradientUnits="userSpaceOnUse" x1="-155.4997864" y1="553.9348145" x2="-156.4997864" y2="554.9348145" gradientTransform="matrix(103.9229965 0 0 -60 16281.1660156 33505.2265625)">
<stop offset="0" style="stop-color:#E5251E"/>
<stop offset="1" style="stop-color:#9B134D"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000087406250813457147340000016349020068421769389_)" stroke-width="5" d="
M138.8976288,258.897644c-42.8718491-0.0000305-82.4870605-22.8718872-103.9229889-60"/>
<linearGradient id="SVGID_00000139976144062006628720000013983753953570931840_" gradientUnits="userSpaceOnUse" x1="-149.0865936" y1="556.5291138" x2="-149.0865936" y2="557.5291138" gradientTransform="matrix(16.076952 0 0 -120 2408.2407227 66982.390625)">
<stop offset="0" style="stop-color:#9B134D"/>
<stop offset="1" style="stop-color:#7D1526"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000139976144062006628720000013983753953570931840_)" stroke-width="5" d="
M34.9746323,198.897644c-21.435936-37.1281281-21.435936-82.8718796,0-120.0000076"/>
<linearGradient id="SVGID_00000165210933497967896270000001121849787090825106_" gradientUnits="userSpaceOnUse" x1="-156.4997864" y1="554.276123" x2="-155.4997864" y2="555.276123" gradientTransform="matrix(103.9230042 0 0 -60 16281.1669922 33325.2265625)">
<stop offset="0" style="stop-color:#7D1526"/>
<stop offset="1" style="stop-color:#5CB130"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000165210933497967896270000001121849787090825106_)" stroke-width="5" d="
M34.9746323,78.8976364c21.4359245-37.1281128,61.0511475-59.9999809,103.9229965-60"/>
</g>
</g>
<g id="Layer_1">
<g id="percentage">
<path id="percent_00000032606264135215483020000005541880329144611487_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M138.8975983,18.9037132c2.5035095,0.0003986,5.015625,0.0722179,7.5348663,0.2307148"/>
<path id="percent_00000028306369609926755810000017306730045105677219_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M146.4320831,19.1404915c2.4985504,0.1575947,5.0011902,0.3870087,7.5055084,0.7033787"/>
<path id="percent_00000082361906806784941970000002028381295781626284_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M153.9368286,19.8498974c2.4837189,0.3141689,4.9670105,0.7002716,7.4465332,1.1732655"/>
<path id="percent_00000138539961731828049390000013280001327052129686_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M161.3822174,21.029129c2.4590912,0.4695034,4.9132538,1.0107708,7.3581848,1.6385212"/>
<path id="percent_00000065036175195749828250000017498148216197095590_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M168.7388763,22.6735344c2.4247589,0.6229839,4.8400879,1.3172817,7.2407684,2.0973129"/>
<path id="percent_00000119116810928129124040000012881680177546199181_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M175.9777679,24.7766247c2.3808594,0.7740059,4.747818,1.6185913,7.0947876,2.547823"/>
<path id="percent_00000074422924677370162630000007097224799103991992_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M183.0703125,27.3300953c2.3275604,0.9219761,4.6368256,1.9135189,6.9208069,2.9882832"/>
<path id="percent_00000178883418153782545710000000098690301336231076_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M189.9885406,30.3238754c2.2650757,1.0663033,4.5075073,2.2008896,6.7195129,3.4169464"/>
<path id="percent_00000086682612977677562320000017203198116736105388_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M196.7051239,33.7461433c2.1936493,1.2064247,4.3604279,2.4795761,6.4916992,3.8321266"/>
<path id="percent_00000052070989569751716190000012502694854833929856_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M203.193573,37.5833969c2.1135712,1.3417854,4.1961212,2.7484779,6.238266,4.2321854"/>
<path id="percent_00000060006693123788471530000004814622102259509684_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M209.4282684,41.8204956c2.0251465,1.4718475,4.015274,3.0065269,5.9602203,4.6155319"/>
<path id="percent_00000035506236246205691270000010670775571977134516_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M215.384613,46.4407082c1.9287415,1.5961037,3.818573,3.2527199,5.6586609,4.9806747"/>
<path id="percent_00000021834723034317312760000002303020510782178470_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M221.0391083,51.425808c1.824707,1.7140617,3.6067963,3.4860687,5.3347473,5.3261566"/>
<path id="percent_00000006709561094081735420000002392057266482324352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M226.3694153,56.7561188c1.7134857,1.8252525,3.3807831,3.7056618,4.9897919,5.6506157"/>
<path id="percent_00000168106616366021304380000007440336931191248563_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M231.3545227,62.4106064c1.5954895,1.929245,3.1414337,3.9106293,4.6251373,5.952774"/>
<path id="percent_00000154403508051192442000000000638716018432371082_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M235.9747467,68.366951c1.4712067,2.0256195,2.889679,4.1001663,4.2422333,6.2314453"/>
<path id="percent_00000147179810747847188290000001428271484682055339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M240.2118378,74.6016464c1.3411102,2.1139984,2.6265259,4.2735214,3.8425903,6.485527"/>
<path id="percent_00000131327499497543205100000014632942614648512180_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M244.0491028,81.0900955c1.205719,2.1940308,2.3529968,4.4300079,3.4277649,6.7139969"/>
<path id="percent_00000172432103422618070720000011453093990830625721_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M247.4713745,87.8066788c1.0655823,2.2654114,2.0702057,4.5690155,2.9994354,6.9159851"/>
<path id="percent_00000135677098630294360220000003873538208549038266_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M250.4651489,94.7248993c0.9212341,2.3278503,1.7792358,4.6899872,2.5592651,7.0906677"/>
<path id="percent_00000158020922039739367080000004200218855343618215_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M253.018631,101.8174438c0.7732544,2.3811035,1.4812317,4.79245,2.1089783,7.237381"/>
<path id="percent_00000026122967701204520070000015876310050288714924_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M255.1217194,109.0563278c0.6222229,2.4249573,1.1773834,4.8759995,1.6503754,7.3555222"/>
<path id="percent_00000152962838819067721290000009347820478988735362_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M256.7661438,116.4129868c0.4687195,2.4592361,0.8688965,4.9403076,1.1852417,7.4446335"/>
<path id="percent_00000016058514067193110380000006409792379723118509_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M257.9453735,123.8583755c0.313385,2.4838181,0.5569763,4.9851151,0.7154846,7.5043716"/>
<path id="percent_00000140000107912993020050000017191904555679128495_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.6547852,131.3631287c0.1567993,2.4985962,0.2428589,5.0102539,0.2428589,7.5344849"/>
<path id="percent_00000134230670064259057810000014412453315966410635_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.891571,138.8975983c-0.0003967,2.5035095-0.0722351,5.015625-0.2307129,7.5348663"/>
<path id="percent_00000039847019014144571950000016927207652635820934_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.6547852,146.4320831c-0.1575928,2.4985504-0.3870239,5.0011902-0.7033691,7.5055084"/>
<path id="percent_00000111177965635098942620000007839177954551259531_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M257.9453735,153.9368286c-0.3141785,2.4837189-0.7002563,4.9670105-1.1732483,7.4465332"/>
<path id="percent_00000158743007099903390380000014738849805299663024_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M256.7661438,161.3822174c-0.4695129,2.4590912-1.0107727,4.9132538-1.6385193,7.3581848"/>
<path id="percent_00000028309406856002023020000006322882414327936641_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M255.1217346,168.7388763c-0.6229706,2.4247589-1.317276,4.8400879-2.0973053,7.2407684"/>
<path id="percent_00000003821784454078841200000017734589216049303965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M253.0186462,175.9777679c-0.7740021,2.3808594-1.6185913,4.747818-2.547821,7.0947876"/>
<path id="percent_00000030459373252026938060000003091514103304890552_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M250.4651794,183.0703125c-0.9219818,2.3275604-1.9135132,4.6368256-2.9882812,6.9208069"/>
<path id="percent_00000137097836164980653750000007511925382980972474_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M247.471405,189.9885406c-1.0663147,2.2650757-2.2008972,4.5075073-3.4169464,6.7195129"/>
<path id="percent_00000120549228966608569990000015797767285371552671_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M244.0491333,196.7051239c-1.2064209,2.1936493-2.4795837,4.3604279-3.8321228,6.4916992"/>
<path id="percent_00000124148718096123232570000014324110734300873868_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M240.2118835,203.193573c-1.3417969,2.1135712-2.7484894,4.1961212-4.232193,6.238266"/>
<path id="percent_00000170263932946661298140000016757709090411024010_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M235.9747772,209.4282684c-1.4718475,2.0251465-3.0065308,4.015274-4.6155243,5.9602203"/>
<path id="percent_00000076561799036968615190000011673503828065269145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M231.3545685,215.384613c-1.5960999,1.9287415-3.2527161,3.818573-4.9806671,5.6586609"/>
<path id="percent_00000083788385693069256220000017438794050104042130_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M226.3694611,221.0391083c-1.7140503,1.824707-3.4860687,3.6067963-5.3261414,5.3347473"/>
<path id="percent_00000058568819026925842230000011573971903342706051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M221.0391541,226.3694153c-1.8252563,1.7134857-3.705658,3.3807831-5.6506195,4.9897919"/>
<path id="percent_00000170248015312475403250000009327155199174933140_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M215.3846741,231.3545227c-1.929245,1.5954895-3.9106293,3.1414337-5.952774,4.6251373"/>
<path id="percent_00000118391314128817817130000001054673944705474946_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M209.4283295,235.9747467c-2.0256195,1.4712067-4.100174,2.889679-6.2314453,4.2422333"/>
<path id="percent_00000030481540633374888260000006401156712534483352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M203.193634,240.2118378c-2.1139984,1.3411102-4.2735291,2.6265259-6.4855347,3.8425903"/>
<path id="percent_00000147205492172703277950000000310650880793352115_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M196.7051849,244.0491028c-2.194046,1.205719-4.4300079,2.3529968-6.7140045,3.4277649"/>
<path id="percent_00000093880020027073771160000003256237277600216455_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M189.9886017,247.4713745c-2.2654114,1.0655823-4.5690155,2.0702057-6.9159851,2.9994354"/>
<path id="percent_00000075147182715102416800000012797925539604231085_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M183.0703735,250.4651489c-2.3278503,0.9212341-4.6899872,1.7792358-7.0906677,2.5592651"/>
<path id="percent_00000083797828779468483540000014297191505650432948_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M175.977829,253.018631c-2.3811035,0.7732544-4.79245,1.4812317-7.237381,2.1089783"/>
<path id="percent_00000154400065520716691750000012560135372897606272_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M168.7389526,255.1217194c-2.4249573,0.6222229-4.8760071,1.1773834-7.3555298,1.6503754"/>
<path id="percent_00000049922155415035982430000009480219739568052911_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M161.3822937,256.7661438c-2.4592438,0.4687195-4.9403076,0.8688965-7.4446411,1.1852417"/>
<path id="percent_00000162320235452610224130000005560025261011403174_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M153.9369049,257.9453735c-2.4838257,0.313385-4.9851227,0.5569763-7.5043793,0.7154846"/>
<path id="percent_00000091005145132581292730000010488787202275794842_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M146.4321594,258.6547852c-2.4985962,0.1567993-5.0102539,0.2428589-7.5344849,0.2428589"/>
<path id="percent_00000103257077072244403140000003000387872561340295_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M138.8976746,258.891571c-2.5035095-0.0003967-5.015625-0.0722351-7.5348663-0.2307129"/>
<path id="percent_00000111158083606585183660000007892379069054209716_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M131.3631897,258.6547852c-2.4985504-0.1575928-5.0011826-0.3870239-7.5055084-0.7033691"/>
<path id="percent_00000023242655163615003150000001829109110270087815_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M123.8584442,257.9453735c-2.4837189-0.3141785-4.9670181-0.7002563-7.4465332-1.1732483"/>
<path id="percent_00000022518474140820104510000003271974032260690093_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M116.4130554,256.7661438c-2.4590988-0.4695129-4.9132462-1.0107727-7.3581772-1.6385193"/>
<path id="percent_00000093877533468282143940000005000384021352938391_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M109.0563965,255.1217346c-2.4247589-0.6229706-4.8400803-1.317276-7.2407684-2.0973053"/>
<path id="percent_00000176745329974692471870000016560602430003898287_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M101.8175125,253.0186462c-2.3808594-0.7740021-4.7478256-1.6185913-7.0947952-2.547821"/>
<path id="percent_00000048478376000292398490000002361039895884042116_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M94.7249603,250.4651794c-2.3275604-0.9219818-4.6368179-1.9135132-6.9208069-2.9882812"/>
<path id="percent_00000063611903572415768630000017217627879398935937_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M87.8067398,247.471405c-2.2650757-1.0663147-4.507515-2.2008972-6.7195129-3.4169464"/>
<path id="percent_00000169540952752603874400000017713679558481356965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M81.0901566,244.0491333c-2.1936569-1.2064209-4.3604279-2.4795837-6.4917068-3.8321228"/>
<path id="percent_00000103252877608182980650000012266219846621553568_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M74.6017075,240.2118835c-2.1135712-1.3417969-4.1961288-2.7484894-6.2382736-4.232193"/>
<path id="percent_00000018229762937518236790000010214476917681663419_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M68.3670044,235.9747772c-2.0251465-1.4718475-4.0152664-3.0065308-5.9602203-4.6155243"/>
<path id="percent_00000049198495772670228700000015892206198793261730_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M62.4106598,231.3545685c-1.9287376-1.5960999-3.8185692-3.2527161-5.6586533-4.9806671"/>
<path id="percent_00000163061696861974236580000012231850179018578051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M56.7561684,226.3694611c-1.824707-1.7140503-3.6067886-3.4860687-5.3347435-5.3261414"/>
<path id="percent_00000103971948649784591570000016617486256704553645_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M51.4258537,221.0391541c-1.7134781-1.8252563-3.3807793-3.705658-4.9897842-5.6506195"/>
<path id="percent_00000018235409277527290320000007366834638086925983_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M46.4407539,215.3846741c-1.5954933-1.929245-3.1414299-3.9106293-4.6251373-5.952774"/>
<path id="percent_00000094617257770944187940000011362927962401918120_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M41.8205338,209.4283295c-1.4712029-2.0256195-2.889679-4.100174-4.2422295-6.2314453"/>
<path id="percent_00000164515347713346567520000006243065964209341855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M37.5834351,203.193634c-1.3411102-2.1139984-2.6265259-4.2735291-3.8425827-6.4855347"/>
<path id="percent_00000059999884343081136830000001429886033743376783_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M33.7461777,196.7051849c-1.2057266-2.194046-2.3530083-4.4300079-3.4277725-6.7140045"/>
<path id="percent_00000096755803173383212970000009641632149746558385_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M30.323904,189.9886017c-1.0655823-2.2654114-2.0702019-4.5690155-2.9994335-6.9159851"/>
<path id="percent_00000124854919331479801570000008131814051369634944_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M27.330122,183.0703735c-0.9212341-2.3278503-1.7792263-4.6899872-2.5592575-7.0906677"/>
<path id="percent_00000138541041412509839910000015910376640192217490_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M24.7766457,175.977829c-0.7732487-2.3811035-1.4812298-4.79245-2.1089802-7.237381"/>
<path id="percent_00000098903297908647029640000018031008645145274505_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M22.6735516,168.7389526c-0.6222115-2.4249573-1.1773853-4.8760071-1.6503773-7.3555298"/>
<path id="percent_00000183963300764045405510000011092879603375097021_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M21.0291424,161.3822937c-0.4687195-2.4592438-0.8688946-4.9403076-1.1852646-7.4446411"/>
<path id="percent_00000093885803657794915140000009980523458620072098_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.8499069,153.9369049c-0.3133793-2.4838257-0.5569763-4.9851227-0.7154751-7.5043793"/>
<path id="percent_00000117652736697560549580000011023614209648241292_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.1404972,146.4321594c-0.1567993-2.4985962-0.2428589-5.0102539-0.2428589-7.5344849"/>
<path id="percent_00000181770529799759843720000003459230667421039798_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M18.9037132,138.8976746c0.0003986-2.5035095,0.0722179-5.015625,0.2307148-7.5348663"/>
<path id="percent_00000105391457419526061150000017621335826939528592_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.1404915,131.3631897c0.1575947-2.4985504,0.3870087-5.0011826,0.7033787-7.5055084"/>
<path id="percent_00000070834920069069246510000014593432956475295678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.8498974,123.8584442c0.3141689-2.4837189,0.7002716-4.9670105,1.1732655-7.4465332"/>
<path id="percent_00000145780121849657739760000002789697054560922549_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M21.029129,116.4130554c0.4695034-2.4590988,1.0107708-4.9132462,1.6385212-7.3581772"/>
<path id="percent_00000064350827270053089010000008395732268159986063_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M22.6735344,109.0563965c0.6229839-2.4247589,1.3172817-4.8400803,2.0973129-7.2407684"/>
<path id="percent_00000156570514578808900040000011510914257191242909_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M24.7766247,101.8175125c0.7740059-2.3808594,1.6185913-4.7478256,2.547823-7.0947952"/>
<path id="percent_00000111895702114263549760000016354777988337565339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M27.3300953,94.7249603c0.9219742-2.3275604,1.913517-4.6368179,2.9882832-6.9208069"/>
<path id="percent_00000091693992784113435900000002782527186721650343_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M30.3238754,87.8067398c1.0663033-2.2650757,2.2008896-4.507515,3.4169464-6.7195129"/>
<path id="percent_00000127027784293992435210000010206990156284212921_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M33.7461433,81.0901566c1.2064247-2.1936569,2.4795761-4.3604279,3.8321266-6.4917068"/>
<path id="percent_00000029752578365103483660000000720109475777914262_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M37.5833969,74.6017075c1.3417854-2.1135712,2.7484779-4.1961288,4.2321854-6.2382736"/>
<path id="percent_00000133527447926399569810000011232003768216319417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M41.8204956,68.3670044c1.4718475-2.0251465,3.0065269-4.0152664,4.6155319-5.9602203"/>
<path id="percent_00000165925257800574240700000016152351988347906738_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M46.4407082,62.4106598c1.5961037-1.9287376,3.2527199-3.8185692,4.9806747-5.6586533"/>
<path id="percent_00000149348233867586492550000003341265119176423314_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M51.425808,56.7561684c1.7140617-1.824707,3.4860687-3.6067886,5.3261566-5.3347435"/>
<path id="percent_00000026142351716086889880000006482746373313516417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M56.7561188,51.4258537c1.8252525-1.7134781,3.7056618-3.3807793,5.6506157-4.9897842"/>
<path id="percent_00000013902945361986194870000000093217682497202107_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M62.4106064,46.4407539c1.929245-1.5954933,3.9106293-3.1414299,5.952774-4.6251373"/>
<path id="percent_00000106128325588063384870000008938161577721158079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M68.366951,41.8205338c2.0256195-1.4712029,4.1001663-2.889679,6.2314453-4.2422295"/>
<path id="percent_00000018205018634590916450000001348648361061842613_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M74.6016464,37.5834351c2.1139984-1.3411102,4.2735214-2.6265259,6.485527-3.8425827"/>
<path id="percent_00000147937565868708783540000003214215170601951145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M81.0900955,33.7461777c2.1940308-1.2057266,4.4300079-2.3530083,6.7139969-3.4277725"/>
<path id="percent_00000012458452623860852590000015295768040977373079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M87.8066788,30.323904c2.2654114-1.0655823,4.5690155-2.0702019,6.9159851-2.9994335"/>
<path id="percent_00000057832004969570609980000012330358831092775855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M94.7248993,27.330122c2.3278503-0.9212341,4.6899872-1.7792263,7.0906677-2.5592575"/>
<path id="percent_00000078006224767329465430000007054961664540901035_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M101.8174438,24.7766457c2.3811035-0.7732487,4.79245-1.4812298,7.237381-2.1089802"/>
<path id="percent_00000047057945113382245830000007134537769256595896_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M109.0563278,22.6735516c2.4249573-0.6222115,4.8759995-1.1773853,7.3555222-1.6503773"/>
<path id="percent_00000134941977547941051570000011425067305948609678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M116.4129868,21.0291424c2.4592361-0.4687195,4.9403076-0.8688946,7.4446335-1.1852646"/>
<path id="percent_00000159467815995511282350000007405889823836648332_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M123.8583755,19.8499069c2.4838181-0.3133793,4.9851151-0.5569763,7.5043716-0.7154751"/>
<path id="percent_00000023984292376357922240000008516262335734862210_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M131.3631287,19.1404972c2.4985962-0.1567993,5.0102539-0.2428589,7.5344849-0.2428589"/>
</g>
</g>
</svg>
And this is how you show the percentage with Javascript:
const percents = document.querySelectorAll('#percentage path');
const winnerResult = 71;
for (const percent in percents) {
if (percent < winnerResult) {
percents[percent].style.display = 'none';
}
}

Related

this is my code:
<div className="Aktiendashboard-AllgemeineInfo-container">
<Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
<Tab icon={ <SvgIcon>
**<path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />**
</SvgIcon>}
label="Company" value="Company"/>
<Tab icon={ <SvgIcon>
Put SVG Inside this
</SvgIcon>}
label="Company" value="Company"/>
<Tab icon={<PersonPinIcon />} label="Charts" value="Charts" />
<Tab icon={<ApartmentIcon />} label="Valuation" value="Valuation" />
<Tab icon={<CalculateIcon />} label="Dividende" value="Dividende" />
<Tab icon={<PersonSearchIcon />} label="Eigentum" value="Eigentum" />
</Tabs>
</div>
i have some problems with .svg icons. The first icon is an arrow () and it fits very well.
But when I want to insert a different svg path it doesn't work. For example this svg path:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
</svg>
Can u help me how I can implement the svg path to my code? I want to insert the svg path from the second code snippet into the "Put SVG inside This" line. It doesn't show up anything yet
Thanks and have a great weekend

if you can use html
<Tab icon={ <SvgIcon>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
</svg>
</SvgIcon>}
if you can use react
<Tab icon={ <SvgIcon>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fillRule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fillRule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fillRule="evenodd"/>
</svg>
</SvgIcon>}

Am wondering how can we combine multiple svg paths to a single path so that fill like operation can be done.
my svg
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='227.178pt' height='191.646pt' viewBox='0 -191.646 227.178 191.646'>
<g id='page1' >
<g transform='matrix(1 0 0 -1 0 0)'>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834V11.753911" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M13.027075 4.988281C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 4.921875H13.027075" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 12.121112C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 179.523834V12.121112" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994H12.968398" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
i tried to combine path data like this but it messed up the shape
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834 C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448 C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994 V11.753911 C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658 C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499 H13.027075 C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254 C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875 V12.121112 C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448 C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834 H12.968398 z" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
my goal is to combine them so that i can fill inside of the shape. so any idea how to to do it properly or any there is js/php library which can do it

I'm working on a SVG animation, and i'm trying to add a Red-Circle and a Green-Circle to the front of the printer.
When you inspect my code you can see that #red-light, and #green-light are showing in the DOM, but it's not visible.
Does anybody know why they are both not showing as visisble?
https://codepen.io/stinkytofu3311/pen/VbYjNK
<div class="svg-wrapper">
<div class="svg-container">
<svg viewBox="0 0 356 356" style="border:solid 0px black" preserveAspectRatio="xMinYMin meet" class="svg-content">
<defs>
<path d="M3.26 0.75C2 0.75 0.98 1.78 0.98 3.04L0.98 5.32 114.7 5.32 114.7 3.04C114.7 1.77 113.68 0.75 112.42 0.75L3.26 0.75Z" id="path-1"/>
<path d="M65.84 0.05L0.53 0.05C0.53 0.05 29.77 15.29 65.84 15.29 101.91 15.29 131.76 0.05 131.76 0.05L65.84 0.05Z" id="path-3"/>
</defs>
<!-- Background Circle -->
<g id="background">
<g id="bg-circle" transform="translate(-47.000000, -145.000000)">
<path class="bg-circle-color" d="M225,500.6c98.3,0,178-79.4,178-177.3S323.2,146,225,146S47,225.4,47,323.3S126.7,500.6,225,500.6z"/>
</g>
</g>
<!-- Printer Front-Bottom -->
<g id="front-bottom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 222.000000)">
<path d="M203.21 1.36C203.21 1.36 203.21 7.23 203.21 7.23 203.21 10.57 200.49 13.27 197.17 13.27L6.45 13.27C3.11 13.27 0.41 10.57 0.41 7.22L0.41 1.3C0.41 0.58 203.21 3.39 203.21 1.36Z" id="Front-Panel-Bottom" fill="#E7E7E7"/>
<path d="M158.7 0.32L158.7 2.61C158.7 3.87 157.69 4.89 156.42 4.89L47.26 4.89C46 4.89 44.98 3.88 44.98 2.61L44.98 0.32 158.7 0.32Z" id="Front-Hole-Bottom" fill="#8F8E8E"/>
</g>
<!-- Printer Top-Panel -->
<g id="top-panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(85.000000, 114.000000)">
<polygon fill="#F9F9F9" points="0.33 18 0.33 17.91 6.85 0.31 179.92 0.01 186.15 17.91 186.15 18"/>
<path d="M45.19 14.89C45.44 14.4 46.1 14 46.64 14L137.48 14C138.03 14 138.68 14.41 138.92 14.89L140.54 18.11 44.65 17.86C44.1 17.86 43.86 17.46 44.12 16.96L45.19 14.89Z" id="Top-Feed-1" fill="#B9B9B9"/>
</g>
<!-- File -->
<g id="filewrapper">
<g id="file" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(133.000000, 55.000000)">
<polyline id="Paper-Body" fill="#F6A623" points="0.12 0 72.17 0 86.12 14.41 86.12 92.54 0.24 92.54"/>
<polygon id="Paper-Top-Right-Fold" fill="#AA7216" points="70.88 0 70.88 15.83 86.84 15.83"/>
<text id="AI-Text" font-family="MyriadPro-Bold, Myriad Pro" font-size="49.52" font-weight="bold" letter-spacing="-1.57" fill="#FFFFFF">
<tspan x="20.82" y="63.66">
Ai
</tspan>
</text>
</g>
<!-- File- Tag -->
<g id="file-tag-group" transform="translate(70.000000, 40.000000)">
<g id="background-color">
<defs><rect id="SVGID_1_" x="-80" y="-35.9" width="496" height="363"/></defs><defs>
<path id="SVGID_2_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<defs>
<path id="SVGID_3_" d="M8.5 0h89.4v68.9H8.5V0zM30.5 27c0-2.8 2.2-5 5-5h35.4c2.8 0 5 2.2 5 5v14.9c0 2.8-2.2 5-5 5H35.5c-2.8 0-5-2.2-5-5V27L30.5 27zM28.5 27v14.9c0 3.9 3.1 7 7 7h35.4c3.9 0 7-3.1 7-7V27c0-3.9-3.1-7-7-7H35.5C31.6 20 28.5 23.1 28.5 27L28.5 27z"/>
</defs>
<clipPath id="SVGID_4_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_5_" class="sta"><use xlink:href="#SVGID_2_"/></clipPath>
<clipPath id="SVGID_6_" class="stb"><use xlink:href="#SVGID_3_"/></clipPath>
<path class="stc" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g><g id="stroke">
<defs>
<rect id="SVGID_7_" x="-80" y="-35.9" width="496" height="363"/></defs>
<defs>
<path id="SVGID_8_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<clipPath id="SVGID_9_"><use xlink:href="#SVGID_7_"/></clipPath>
<clipPath id="SVGID_10_" class="std"><use xlink:href="#SVGID_8_"/></clipPath>
<path class="ste" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g>
<path id="file-text" class="stf" d="M41.6 33.9h1.3v7h2.3v-7H47v-1.8h-1.7v-0.6c0-0.4 0.1-0.7 0.2-0.9 0.1-0.2 0.4-0.2 0.7-0.2 0.3 0 0.7 0 1.1 0.1l0.3-1.6c-0.6-0.2-1.3-0.3-1.9-0.3 -0.6 0-1.2 0.1-1.6 0.3 -0.4 0.2-0.7 0.5-0.9 0.9s-0.2 0.9-0.2 1.7v0.7h-1.3V33.9L41.6 33.9zM50.5 30.9v-2.2h-2.3v2.2H50.5L50.5 30.9zM50.5 40.9v-8.8h-2.3v8.8H50.5L50.5 40.9zM55 40.9V28.8h-2.3v12.1H55L55 40.9zM61.8 39.1c-0.2 0.2-0.6 0.3-0.9 0.3 -0.5 0-1-0.2-1.3-0.6 -0.4-0.4-0.5-0.9-0.6-1.6h5.8c0-1.8-0.3-3.1-1.1-4 -0.8-0.9-1.8-1.3-3.1-1.3 -1.2 0-2.1 0.4-2.9 1.2 -0.8 0.8-1.1 2-1.1 3.4 0 1.2 0.3 2.2 0.9 3 0.7 1 1.9 1.5 3.4 1.5 1 0 1.8-0.2 2.4-0.7 0.6-0.4 1.1-1.1 1.4-1.9l-2.3-0.4C62.2 38.5 62.1 38.9 61.8 39.1L61.8 39.1zM59 35.8c0-0.6 0.2-1.1 0.5-1.5 0.3-0.4 0.8-0.6 1.3-0.6 0.5 0 0.9 0.2 1.2 0.5 0.3 0.4 0.5 0.9 0.5 1.5H59L59 35.8z"/>
</g>
</g>
<!-- Printer Paper -->
<g id="printer-paper" transform="translate(100.000000, 115.000000)">
<g id="end_3_">
<g id="end"> <!-- Printer Paper End Graphic -->
<polygon id="paper-base_1_" class="st0 start1" points="147.8,107.5 7.8,107.5 29.3,25.5 126.3,25.5 "/>
<polygon class="st1 start2" points="139.5,103.2 16,103.2 19.8,87.1 135.7,87.1 "/>
<polygon class="st1 start3" points="74.8,82.9 20.8,82.9 24,69.1 75,69.1 "/>
<polygon class="st1 start4" points="134.7,82.9 80.7,82.9 80.6,77.8 133.5,77.8 "/>
<polygon class="st1 start5" points="75.1,65.1 25,65.1 27.7,53.3 75.2,53.3 "/>
<polygon class="st1 start6" points="124.6,39.8 30.9,39.8 33.5,28.7 122,28.7 "/>
<polygon class="st1 start7" points="132.8,73.9 80.7,73.9 80.7,69.1 131.7,69.1 "/>
<polygon class="st1 start8" points="130.6,65.4 80.4,65.4 80.4,61 129.6,61 "/>
<polygon class="st1 start9" points="128.7,57.1 80.3,57.1 80.3,53 127.7,53 "/>
<polygon class="st1 start10" points="127,49.8 80.3,49.8 80.2,46 126.1,46 "/>
</g>
</g>
<g id="start"> <!-- Printer Paper Start Graphic -->
<g id="start_1_">
<rect id="paper-base" x="29.3" y="25.4" class="st0 end1" width="97" height="82"/>
<rect x="34.3" y="92.1" class="st1 end2" width="86.9" height="12.3"/>
<rect x="34.3" y="76.4" class="st1 end3" width="41.3" height="12.3"/>
<rect x="80" y="84.2" class="st1 end4" width="41.3" height="4.4"/>
<rect x="34.3" y="60.3" class="st1 end5" width="41.3" height="12.3"/>
<rect x="34.3" y="29.9" class="st1 end6" width="86.9" height="14.6"/>
<rect x="80.1" y="76.4" class="st1 end7" width="41.3" height="4.4"/>
<rect x="80" y="68.4" class="st1 end8" width="41.3" height="4.4"/>
<rect x="80" y="60" class="st1 end9" width="41.3" height="4.4"/>
<rect x="80" y="52.1" class="st1 end10" width="41.3" height="4.4"/>
</g>
</g>
</g>
<!-- Printer Body -->
<g id="Printer-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 130.000000)">
<polygon id="Front-Fill" fill="#E7E7E7" points="0.41 24.29 0.41 83.57 0.41 94 203.21 94 203.21 83.62 203.21 24.29"/>
<g id="Bottom-Feed" transform="translate(44.000000, 89.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<polygon id="Fill-2" fill="#8E8E8E" mask="url(#mask-2)" points="-4.02 10.32 119.7 10.32 119.7 -4.25 -4.02 -4.25"/>
</g>
<g id="Fronot-Decor" transform="translate(36.000000, 24.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"/>
</mask>
<g id="Front-Decor"/>
<polygon id="Fill-5" fill="#A7A6A6" mask="url(#mask-4)" points="-4.47 20.29 136.76 20.29 136.76 -4.95 -4.47 -4.95"/>
</g>
<polygon id="Top" fill="#F9F9F9" points="9.33 0.91 0.67 24.3 203.47 24.8 195.16 0.91"/>
<polygon id="Vent-3" fill="#FFFFFF" points="7.29 37.24 29.47 37.24 29.47 31.91 7.29 31.91"/>
<polygon id="Vent-2" fill="#FFFFFF" points="7.29 44.09 29.47 44.09 29.47 38.76 7.29 38.76"/>
<polygon id="Vent-1" fill="#FFFFFF" points="7.29 50.95 29.47 50.95 29.47 45.62 7.29 45.62"/>
</g>
<!-- Red Light -->
<g id="red-light" transform="translate(90.000000, 70.000000)">
<defs>
<rect id="SVGID_1_" x="-247.7" y="-163.5" width="496" height="363"/></defs>
<defs>
<path id="SVGID_2_" d="M18.6 22.1c1.4 0 2.5-1.2 2.5-2.6 0-1.5-1.1-2.6-2.5-2.6 -1.4 0-2.5 1.2-2.5 2.6C16 20.9 17.2 22.1 18.6 22.1L18.6 22.1z"/>
</defs>
<clipPath id="SVGID_3_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_4_" class="sth"><use xlink:href="#SVGID_2_"/></clipPath>
<rect x="11" y="11.8" class="sti" width="15.1" height="15.3"/>
</g>
<!-- Green Light -->
<g id="green-light">
<defs>
<rect id="SVGID_1_" x="-248" y="-152.4" width="496" height="363"/>
</defs>
<defs>
<path id="SVGID_2_" d="M18.7,25.6c2,0,3.7-1.7,3.7-3.8c0-2.1-1.6-3.8-3.7-3.8c-2,0-3.7,1.7-3.7,3.8C15,23.9,16.6,25.6,18.7,25.6
L18.7,25.6z"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/>
</clipPath>
<clipPath id="SVGID_4_" class="stk">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<rect x="10" y="13" class="stl" width="17.3" height="17.6"/>
</g>
<!-- Tap Panel that covers paper -->
<g id="Top-Panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(128.000000, 130.000000)">
<path d="M1.53 0.89C1.79 0.4 2.45 0 2.99 0L93.82 0C94.37 0 95.02 0.41 95.26 0.89L96.88 4.11 0.99 3.86C0.44 3.86 0.21 3.46 0.46 2.96L1.53 0.89Z" id="Top-Feed-1" fill="#B9B9B9" transform="translate(48.440524, 2.053393) scale(1, -1) translate(-48.440524, -2.053393) "/>
</g>
</svg>
</svg>

I am using SVG to try and animate a gradient path - to create a tail / shooting star effect. In doing this, I want to animate an object at the front of the tail, which I have shown in my example below (the circles).
The example works barely in Google Chrome, haven't checked others... You can see I've got 5 circles/paths and only 1 of them is working properly. The curved one animates the gradient at a different speed to the object and the others don't work properly at all except for the "almost-horizontal" one.
Can someone please provide some insight into why this doesn't work, recommend a way I could do this and provide an example if possible?
I'm almost to the point where i'll just write my own render code in canvas and using a JS library... :(
<svg style="height: 400px; width: 100%" viewBox="0 0 500 200">
<path id="circlePath1" stroke-width="2" d="M10 100 Q 100 10, 150 80 T 300 100" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath2" stroke-width="2" d="M30 20 L 130 19" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath3" stroke-width="2" d="M30 10 L 130 10" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath4" stroke-width="2" d="M10 10 L 10 110" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath5" stroke-width="2" d="M10 20 L 20 110" stroke="url(#grad)" fill="transparent"></path>
<linearGradient id='grad'>
<stop stop-opacity="0" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0.20;0.80' repeatCount="indefinite" ></animate>
</stop>
<stop stop-color='#800' stop-opacity=".5">
<animate attributeName="offset" dur="2s" values='-0.02;0.98' repeatCount="indefinite" ></animate>
</stop>
<stop stop-opacity="0.5" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate>
</stop>
<stop stop-opacity="0" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate>
</stop>
</linearGradient>
<circle id="c1" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath1"></mpath>
</animateMotion>
</circle>
<circle id="c2" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath2"></mpath>
</animateMotion>
</circle>
<circle id="c3" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath3"></mpath>
</animateMotion>
</circle>
<circle id="c4" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath4"></mpath>
</animateMotion>
</circle>
<circle id="c5" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath5"></mpath>
</animateMotion>
</circle>
</svg>

In this attempt I use a radial gradient that is masked by the line to create the trail, then a separate dot.
<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="motion-path" stroke-width="2" d="M202.4 58.3c-13.8.1-33.3.4-44.8 9.2-14 10.7-26.2 29.2-31.9 45.6-7.8 22.2-13.5 48-3.5 70.2 12.8 28.2 47.1 43.6 68.8 63.6 19.6 18.1 43.4 26.1 69.5 29.4 21.7 2.7 43.6 3.3 65.4 4.7 19.4 1.3 33.9-7.7 51.2-15.3 24.4-10.7 38.2-44 40.9-68.9 1.8-16.7 3.4-34.9-10.3-46.5-9.5-8-22.6-8.1-33.2-14.1-13.7-7.7-27.4-17.2-39.7-26.8-5.4-4.2-10.4-8.8-15.8-12.9-4.5-3.5-8.1-8.3-13.2-11-6.2-3.3-14.3-5.4-20.9-8.2-5-2.1-9.5-5.2-14.3-7.6-6.5-3.3-12.1-7.4-19.3-8.9-6-1.2-12.4-1.3-18.6-1.5-10.2-.3-20.2-1.5-30.3-1" stroke="#666" fill="none"/>
<mask id="path-mask">
<use xlink:href="#motion-path" stroke="#666"/>
</mask>
<symbol id="ball">
<circle id="ball" r="2.5" fill="#800">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath xlink:href="#motion-path"/>
</animateMotion>
</circle>
</symbol>
<symbol id="trail">
<circle r="30" fill="url(#grad)">
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#motion-path"/>
</animateMotion>
</circle>
</symbol>
<linearGradient id="grad">
<stop offset="0" stop-opacity="0" stop-color="#800"/>
<stop offset=".5" stop-opacity=".8" stop-color="#800"/>
<stop offset=".5" stop-opacity="0" stop-color="#800"/>
</linearGradient>
</defs>
<use xlink:href="#ball"/>
<use xlink:href="#trail" mask="url(#path-mask)"/>
</svg>
It has its limitations (if the path gets too close you get the trail showing on both bits) but hopefully this gives you an idea to play with.

Is there any way to style an SVG line with CSS? I have tried adding. I want to add classes onclick with JQuery later on. This will add the class, then change the stroke colour.
.black {
fill: black!important;
stroke: black!important;
}
to my SVG
<g id="Layer_1">
<image display="none" overflow="visible" width="1800" height="4913" xlink:href="../../../../Desktop/gcs-career-path.jpg" transform="matrix(1 0 0 1 -405.5005 -428.001)"></image>
<polyline class="black" fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" points="546.834,107.001 550.723,105.249 641.501,64.334"/>
<line class="black" fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="641.501" y1="151" x2="551.168" y2="109.667"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="151" x2="739.834" y2="108.001"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="64.334" x2="739.834" y2="105.5"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="746.168" y1="105.5" x2="840.834" y2="77.997"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="848.166" y1="77.997" x2="943.833" y2="97.667"/>
</g>

Sure you can!
I have modified/simplified your example in this JSFIDDLE, so you can try it.
Where HTML is:
<button>
add class
</button>
<svg width="1050" height="355">
<polyline fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" points="546.834,107.001 550.723,105.249 641.501,64.334"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="641.501" y1="151" x2="551.168" y2="109.667"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="151" x2="739.834" y2="108.001"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="64.334" x2="739.834" y2="105.5"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="746.168" y1="105.5" x2="840.834" y2="77.997"/>
<line fill="#CDCED0" stroke="#D0D0D0" stroke-width="2" stroke-miterlimit="10" x1="848.166" y1="77.997" x2="943.833" y2="97.667"/>
</svg>
CSS:
.black {
stroke: black;
}
and jQuery:
$("button").on("click", function() {
$("line").addClass("black");
});
It seems that whatever comes from CSS class overrides existing SVG attributes values.