Color a portion of an SVG path

Question

If I have ONE path made up of 51 points, and I want to divide it into 5 equal lengths (ie 11/10 segments each), and color each length a different color, is this possible with CSS or some other attribute?

The path will be animated using d3, so I am trying to avoid making several "children" paths to make up the whole element path.

Here is what the path looks like:

<path d="M110,20L110.88577904706136,20.047209998248857C111.77155809412275,20.094419996497713,113.5431161882455,20.18883999299543,115.30463805182572,20.377145077846542C117.06615991540592,20.56545016269765,118.81764554844356,20.84764033590216,120.54917243489842,21.222116933750126C122.28069932135328,21.59659353159809,123.99226746122535,22.063356554089513,125.67418047904829,22.61976169544746C127.35609349687124,23.176166836805404,129.00835139264507,23.82221409702987,130.62159379528583,24.554243489317997C132.2348361979266,25.286272881606124,133.8090631074343,26.10428440595791,135.33535621385198,27.003643863657487C136.8616493202697,27.90300332135707,138.34000862359738,28.883710712404444,139.7620589230205,29.94021013349393C141.18410922244365,30.996709554583422,142.54985051796223,32.129001005715025,143.85154561227586,33.33066982959774C145.1532407065895,34.532338653480444,146.3908895996982,35.803384850114256,147.5574807633528,37.13660768885309C148.7240719270074,38.469830527591924,149.81960536120792,39.86523000843579,150.83787465017312,41.314900914539024C151.8561439391383,42.76457182064226,152.79714908286817,44.268514152004876,153.65555909922023,45.81820777484727C154.51396911557225,47.36790139768965,155.28978400454645,48.9633463120118,155.9786086197968,50.59550400362038C156.66743323504718,52.22766169522895,157.26926757657372,53.89653216412395,157.78070213259127,55.59266092567566C158.29213668860885,57.288789687227386,158.71317145911743,59.01217674143583,159.04142119802364,60.75305875632364C159.36967093692985,62.49394077121146,159.60513564423366,64.25231774677866,159.74648136532477,66.01822812615272C159.88782708641588,67.7841385055268,159.93505382129425,69.55758228870776,159.8878940210714,71.32851256234781C159.84073422084853,73.09944283598784,159.69918788552445,74.86785960008696,159.46405690336826,76.6237444203648C159.22892592121207,78.37962924064263,158.9002102922238,80.12298211709918,158.47977225611567,81.84392660738509C158.05933422000754,83.56487109767099,157.5471737767796,85.26340720178625,156.9461924176672,86.92991237335076C156.34521105855475,88.59641754491525,155.65540878355785,90.23089178392901,154.88069346037983,91.82407546727661C154.10597813720182,93.4172591506242,153.2463497658427,94.96915227830567,152.3066783127712,96.47096306570013C151.36700685969973,97.97277385309461,150.3472923249159,99.42450230020211,149.25331159498796,100.81792407532912C148.15933086505999,102.21134585045613,146.99108393998787,103.54646095360268,145.75518917200603,104.81570569096695C144.51929440402418,106.08495042833124,143.2157517931326,107.28832479991325,141.85194616865658,108.41901144947602C140.48814054418057,109.54969809903876,139.06407190612012,110.60769702658224,137.5878078878243,111.58701445680447C136.11154386952853,112.56633188702668,134.5830844709974,113.46696781992763,133.0110887200943,114.28381997300949C131.43909296919122,115.10067212609135,129.82356086591614,115.83374049935414,128.17364472240112,116.47887211400366C126.52372857888608,117.12400372865321,124.83942839513108,117.6811985846895,123.13028606818317,118.1473000619312C121.42114374123526,118.61340153917293,119.68715927109443,118.98840963762007,117.93815602621656,119.27019986147212C116.1891527813387,119.55199008532418,114.4251307617238,119.74056243458114,112.65608350454673,119.83484860920962C110.88703624736964,119.9291347838381,109.11296375263035,119.9291347838381,107.34391649545327,119.83484860920962C105.57486923827618,119.74056243458114,103.8108472186613,119.55199008532418,102.06184397378343,119.27019986147212C100.31284072890558,118.98840963762008,98.57885625876476,118.61340153917294,96.86971393181685,118.14730006193122C95.16057160486892,117.6811985846895,93.4762714211139,117.12400372865321,91.82635527759886,116.47887211400368C90.17643913408384,115.83374049935414,88.56090703080876,115.10067212609135,86.98891127990566,114.2838199730095C85.41691552900258,113.46696781992765,83.88845613047147,112.5663318870267,82.41219211217569,111.5870144568045C80.9359280938799,110.60769702658229,79.51185945581945,109.54969809903879,78.14805383134343,108.41901144947605C76.7842482068674,107.28832479991328,75.48070559597582,106.08495042833127,74.24481082799397,104.81570569096698C73.00891606001211,103.54646095360269,71.84066913493999,102.21134585045614,70.74668840501202,100.81792407532913C69.65270767508406,99.42450230020211,68.63299314030026,97.97277385309462,67.69332168722879,96.47096306570015C66.7536502341573,94.96915227830569,65.89402186279817,93.41725915062423,65.11930653962015,91.82407546727663C64.34459121644213,90.23089178392902,63.65478894144523,88.59641754491528,63.053807582332816,86.92991237335077C62.4528262232204,85.26340720178626,61.94066577999245,83.564871097671,61.520227743884334,81.8439266073851C61.09978970777622,80.1229821170992,60.77107407878793,78.37962924064266,60.53594309663174,76.62374442036483C60.30081211447555,74.867859600087,60.15926577915146,73.09944283598787,60.112105978928604,71.32851256234784C60.06494617870574,69.55758228870779,60.11217291358412,67.78413850552684,60.25351863467521,66.01822812615276C60.3948643557663,64.25231774677869,60.63032906307012,62.4939407712115,60.95857880197633,60.75305875632367C61.28682854088254,59.01217674143585,61.70786331139114,57.28878968722739,62.2192978674087,55.592660925675666C62.73073242342626,53.896532164123954,63.3325667649528,52.227661695228974,64.02139138020317,50.5955040036204C64.71021599545352,48.963346312011836,65.48603088442772,47.36790139768968,66.34444090077976,45.81820777484728C67.2028509171318,44.2685141520049,68.14385606086168,42.764571820642274,69.16212534982687,41.31490091453903C70.18039463879205,39.865230008435795,71.27592807299254,38.469830527591945,72.44251923664716,37.13660768885311C73.60911040030176,35.80338485011427,74.84675929341047,34.53233865348045,76.14845438772412,33.33066982959774C77.45014948203777,32.129001005715025,78.81589077755635,30.996709554583422,80.23794107697947,29.940210133493935C81.6599913764026,28.88371071240445,83.13835067973028,27.903003321357083,84.66464378614798,27.0036438636575C86.19093689256567,26.104284405957923,87.76516380207337,25.28627288160613,89.37840620471415,24.554243489318C90.9916486073549,23.82221409702987,92.64390650312873,23.176166836805404,94.32581952095168,22.61976169544746C96.00773253877462,22.063356554089516,97.71930067864668,21.596593531598096,99.45082756510153,21.22211693375013C101.18235445155639,20.847640335902163,102.93384008459405,20.565450162697655,104.69536194817427,20.377145077846542C106.45688381175447,20.18883999299543,108.22844190587722,20.094419996497713,109.1142209529386,20.047209998248857L109.99999999999999,20" class="circle"></path>

Fiddle with animation

Answer 1

You can use an SVG gradient as fill to achieve this. The trick is to define the gradient such that it corresponds to the partitions you want (i.e. set the stops at 20% intervals). To make "hard" stops (i.e. make it seem like it's not a gradient), put 2 stops immediately after each other around the 20% marks, with the first the colour of the previous segment and the following the colours of the next segment. I've used this technique here.

This should work fine for a fixed-length path. If you want to animate the path from start to end, this technique is not particularly suitable. With a gradient defined like this, you'll end up with the partition regardless of the total length of the line. If you need to gradually draw the line with the different colours appearing one after another, you would need to modify the gradient (i.e. the stops) dynamically.