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 !
CodePudding user response：
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';
}
}
CodePudding user response：
Instead of using path I use a circle and the stroke-dashoffset 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.
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.
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="lg1" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="DodgerBlue"></stop>
<stop offset="75%" stop-color="Green"></stop>
</linearGradient>
<linearGradient id="lg2" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="Green"></stop>
<stop offset="75%" stop-color="Yellow"></stop>
</linearGradient>
<linearGradient id="lg3" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="Yellow"></stop>
<stop offset="75%" stop-color="Orange"></stop>
</linearGradient>
<linearGradient id="lg4" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="Orange"></stop>
<stop offset="75%" stop-color="DarkOrchid"></stop>
</linearGradient>
<linearGradient id="lg5" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="DarkOrchid"></stop>
<stop offset="75%" stop-color="Red"></stop>
</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="50 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>