如果我有一个由51个点组成的路径，并且我想将它分成5个相等的长度（即每个11/10段），并且每个长度颜色为不同的颜色，这可能是CSS或其他属性？
路径将使用d3进行动画处理，因此我试图避免制作几条“子”路径来构成整个元素路径。
以下是路径：
<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>
答案 0 :(得分：1)
您可以使用SVG gradient作为填充来实现此目的。诀窍是定义渐变，使其对应于您想要的分区（即以20％的间隔设置停止）。为了使“硬”停止（即使它看起来不是一个渐变），在20％标记周围紧接着两个停止，第一个是前一个段的颜色，下面是下一个段的颜色。 我已经使用了这种技术here。
对于固定长度的路径，这应该可以正常工作。如果要从开始到结束为路径设置动画，则此技术不是特别合适。使用这样定义的渐变，无论线的总长度如何，您都将得到分区。如果你需要逐渐绘制出不同颜色的线条，你需要动态修改渐变（即光圈）。