在 svg 上填充波形
fill inside the wave shape on svg
我从 bgjar.com 制作了一个 wave svg,我需要在 wave 内部填充渐变色或至少与输出图片相似的浅红色
我有什么
我需要什么
原始 svg 代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="320" height="270" preserveAspectRatio="none" viewBox="0 0 320 270">
<g mask="url("#SvgjsMask1038")" fill="none">
<path d="M -58.93643021614276,150 C -52.94,134.6 -40.94,68 -28.93643021614276,73 C -16.94,78 -10.94,164.8 1.0635697838572398,175 C 13.06,185.2 19.06,117.6 31.06356978385724,124 C 43.06,130.4 49.06,219 61.06356978385724,207 C 73.06,195 79.06,67.6 91.06356978385725,64 C 103.06,60.4 109.06,183.4 121.06356978385725,189 C 133.06,194.6 139.06,101 151.06356978385725,92 C 163.06,83 169.06,147.2 181.06356978385725,144 C 193.06,140.8 199.06,73.2 211.06356978385725,76 C 223.06,78.8 229.06,153 241.06356978385725,158 C 253.06,163 259.06,95.4 271.06356978385725,101 C 283.06,106.6 291.28,182.6 301.06356978385725,186 C 310.85,189.4 316.21,131.6 320,118" stroke="rgba(255, 22, 102, 1)" stroke-width="2"></path>
</g>
<defs>
<mask id="SvgjsMask1038">
<rect width="320" height="270" fill="#ffffff"></rect>
</mask>
</defs>
</svg>
你可以修改这个...
<svg
id="chart"
width="1000"
height="500"
viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698,L 1000 500,L 0 500Z" fill="#321834" />
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698" fill="none" stroke="#FF1666" stroke-width="4px" />
</svg>
我从 bgjar.com 制作了一个 wave svg,我需要在 wave 内部填充渐变色或至少与输出图片相似的浅红色
我有什么
我需要什么
原始 svg 代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="320" height="270" preserveAspectRatio="none" viewBox="0 0 320 270">
<g mask="url("#SvgjsMask1038")" fill="none">
<path d="M -58.93643021614276,150 C -52.94,134.6 -40.94,68 -28.93643021614276,73 C -16.94,78 -10.94,164.8 1.0635697838572398,175 C 13.06,185.2 19.06,117.6 31.06356978385724,124 C 43.06,130.4 49.06,219 61.06356978385724,207 C 73.06,195 79.06,67.6 91.06356978385725,64 C 103.06,60.4 109.06,183.4 121.06356978385725,189 C 133.06,194.6 139.06,101 151.06356978385725,92 C 163.06,83 169.06,147.2 181.06356978385725,144 C 193.06,140.8 199.06,73.2 211.06356978385725,76 C 223.06,78.8 229.06,153 241.06356978385725,158 C 253.06,163 259.06,95.4 271.06356978385725,101 C 283.06,106.6 291.28,182.6 301.06356978385725,186 C 310.85,189.4 316.21,131.6 320,118" stroke="rgba(255, 22, 102, 1)" stroke-width="2"></path>
</g>
<defs>
<mask id="SvgjsMask1038">
<rect width="320" height="270" fill="#ffffff"></rect>
</mask>
</defs>
</svg>
你可以修改这个...
<svg
id="chart"
width="1000"
height="500"
viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698,L 1000 500,L 0 500Z" fill="#321834" />
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698" fill="none" stroke="#FF1666" stroke-width="4px" />
</svg>