我有一个圆形徽章，可以根据用户的进度进行填充。我将ART库用于本机反应。圆使用线性渐变填充。
It looks like this.。我的代码如下：
const fillToPercent = 1 - progress
const outerFill = new ART.LinearGradient(
{
0: '#DCDCDC',
[fillToPercent]: '#DCDCDC',
[fillToPercent + 0.01]: color,
1: color,
},
'0',
'0',
'0',
'55'
)
const innerFill = new ART.LinearGradient(
{
0: '#C5C5C5',
[fillToPercent]: '#C5C5C5',
[fillToPercent + 0.01]: highlight,
1: highlight,
},
'0',
'1',
'0',
'55'
)
<ART.Surface width="60" height="55">
<ART.Group>
<ART.Shape
d="M0,0 L34.0791731,1.22782129 C35.5593261,2.03215462 37.2383698,2.45561563 38.9476264,2.45561563 C42.4262795,2.45561563 45.6407474,4.202426 47.380074,7.03794358 L47.380074,7.03794358 C48.2346307,8.43124082 49.463772,9.58814385 50.943925,10.3924772 L50.943925,10.3924772 C53.9566384,12.0295812 55.8123783,15.0551306 55.8123783,18.3293387 C55.8123783,19.9380054 56.2622806,21.5183694 57.1169806,22.9116667 C58.8563071,25.7471842 58.8563071,29.2406702 57.1169806,32.0763226 C56.2622806,33.469485 55.8123783,35.0498491 55.8123783,36.6586505 C55.8123783,39.9328586 53.9566384,42.9582732 50.943925,44.5953773 L50.943925,44.595512 C49.463772,45.3998454 48.2346307,46.5567484 47.380074,47.9499109 L47.380074,47.9499109 C45.6407474,50.7854284 42.4262795,52.5322388 38.9476264,52.5322388 C37.2383698,52.5322388 35.5593261,52.9556998 34.0791731,53.7600332 L34.0791731,53.7601679 C31.0664597,55.397272 27.3548368,55.397272 24.3422665,53.7601679 L24.3422665,53.7600332 C22.8621135,52.9556998 21.1830699,52.5322388 19.4738132,52.5322388 C15.9951601,52.5322388 12.7806923,50.7854284 11.0413657,47.9499109 L11.0413657,47.9499109 C10.186809,46.5567484 8.9576677,45.3998454 7.47751471,44.595512 L7.47751471,44.5953773 C4.46480125,42.9582732 2.6090614,39.9328586 2.6090614,36.6586505 C2.6090614,35.0498491 2.15915904,33.469485 1.30445911,32.0763226 C-0.434867432,29.2406702 -0.434867432,25.7471842 1.30445911,22.9116667 C2.15915904,21.5183694 2.6090614,19.9380054 2.6090614,18.3293387 C2.6090614,15.0551306 4.46480125,12.0295812 7.47751471,10.3924772 L7.47751471,10.3924772 C8.9576677,9.58814385 10.186809,8.43124082 11.0413657,7.03794358 L11.0413657,7.03794358 C12.7806923,4.202426 15.9951601,2.45561563 19.4738132,2.45561563 C21.1830699,2.45561563 22.8621135,2.03215462 24.3422665,1.22782129 L24.3422665,1.22782129 C27.3548368,-0.40928275 31.0664597,-0.40928275 34.0791731,1.22782129"
fill={outerFill}
/>
<ART.Shape
d="M29.2816775,6.11259467 C28.0213209,6.11259467 26.7609642,6.41799335 25.6369243,7.02879071 C24.3347562,7.73649083 22.8515962,8.11062443 21.3479601,8.11062443 C18.7519289,8.11062443 16.3330236,9.42507868 15.035008,11.541036 C14.2831184,12.7668087 13.1974533,13.7888026 11.8952852,14.496368 C9.64706213,15.7180975 8.25053198,17.9948406 8.25053198,20.4381648 C8.25053198,21.8534303 7.85318028,23.249423 7.10129062,24.4751957 C5.80327505,26.591153 5.80327505,29.2201963 7.10129062,31.3361536 C7.85318028,32.5617916 8.25053198,33.9577843 8.25053198,35.3731845 C8.25053198,37.8165087 9.64706213,40.0932519 11.8952852,41.3149814 C13.1974533,42.0225467 14.2831184,43.0445406 15.035008,44.2701786 C16.3330236,46.3862706 18.7519289,47.7007249 21.3478169,47.7007249 C22.8515962,47.7007249 24.3347562,48.0748585 25.6369243,48.7824238 C27.8851474,50.0041533 30.6782076,50.0041533 32.9264307,48.7824238 C34.2285988,48.0748585 35.7117588,47.7007249 37.2153949,47.7007249 C39.8114261,47.7007249 42.2303314,46.3862706 43.528347,44.2703133 C44.2800934,43.0445406 45.3657585,42.0226815 46.6680698,41.3149814 C48.9162929,40.0932519 50.312823,37.8165087 50.312823,35.3731845 C50.312823,33.9577843 50.7101747,32.5619263 51.4620644,31.3361536 C52.7600799,29.2201963 52.7600799,26.591153 51.4620644,24.4751957 C50.7101747,23.249423 50.312823,21.8534303 50.312823,20.4381648 C50.312823,17.9948406 48.9162929,15.7180975 46.6680698,14.496368 C45.3659017,13.7886679 44.2800934,12.7668087 43.528347,11.541036 C42.2303314,9.42507868 39.8114261,8.11062443 37.2153949,8.11062443 C35.7117588,8.11062443 34.2285988,7.73649083 32.9264307,7.02879071 C31.8023908,6.41799335 30.5420341,6.11259467 29.2816775,6.11259467 M29.2816775,50.9111847 C27.7985175,50.9111847 26.3153575,50.5517415 24.9925701,49.8329899 C23.8859993,49.2316267 22.6256427,48.913694 21.3479601,48.913694 C18.2930056,48.913694 15.4463923,47.3668888 13.9189867,44.8767979 C13.2800738,43.8351269 12.3575019,42.9667758 11.2509311,42.3654126 C8.60535631,40.9277746 6.96182375,38.2484605 6.96182375,35.3731845 C6.96182375,34.1704582 6.6241822,32.9841744 5.98526929,31.9426382 C4.45786366,29.4525473 4.45772047,26.358802 5.98526929,23.8687111 C6.6241822,22.8271749 6.96182375,21.6408911 6.96182375,20.4381648 C6.96182375,17.5628888 8.60535631,14.8835747 11.2509311,13.4459367 C12.3575019,12.8445735 13.2800738,11.9762224 13.9189867,10.9345514 C15.4463923,8.4444605 18.2930056,6.89765527 21.3478169,6.89765527 C22.6256427,6.89765527 23.8859993,6.57972258 24.9925701,5.97835942 C27.6381449,4.54072142 30.9250669,4.54072142 33.5707849,5.97835942 C34.6773557,6.57972258 35.9375691,6.89765527 37.2153949,6.89765527 C40.2703494,6.89765527 43.1169627,8.4444605 44.6443683,10.9345514 C45.283138,11.9760876 46.2057099,12.8445735 47.3124239,13.4459367 C49.9579987,14.8835747 51.6015312,17.562754 51.6015312,20.4381648 C51.6015312,21.6408911 51.9391728,22.8271749 52.5780857,23.8687111 C54.1054913,26.358802 54.1054913,29.4525473 52.5780857,31.9426382 C51.9391728,32.9841744 51.6015312,34.1704582 51.6015312,35.3731845 C51.6015312,38.2484605 49.9579987,40.9277746 47.3124239,42.3654126 C46.2058531,42.9667758 45.283138,43.8351269 44.6443683,44.8766631 C43.1169627,47.3668888 40.2703494,48.913694 37.2153949,48.913694 C35.9375691,48.913694 34.6773557,49.2316267 33.5707849,49.8329899 C32.2479975,50.5517415 30.7648375,50.9111847 29.2816775,50.9111847"
fill={innerFill}
opacity={highlightOpacity}
/>
</ART.Group>
</ART.Surface>
但是，我需要渐变边框为“波浪形”，pictured here，而且我不知道从哪里开始或在文档中应该看什么。我尝试使用React Art库的transform属性，但无济于事。
对于如何实现这一目标的任何指示，将不胜感激。
