Filling an SVG path with multiple colors according too the percentage-CodePudding

Hey I´m still learning english so sorry. I want to fill a path with 3 colors side by side. In my case it´s 84.9% lightred, 7.7% lightblue and 7.9% lightgreen

here is my code. I´m new in coding and couldn´t find a way to fill the path accordingly. just in one color.

<path
      mask="url(#juiceMaskId)"
      id="juice"
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"

      style="fill: rgb(255, 187, 0);"
    />

can I set the 'fill' attribute too an percentage? side by side

help would be appreciated :)

I tried to fill it 3 times but did not know how to separate it

CodePudding user response：

It is possible to fill one Path with multiple colors using: linearGradient

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="10%" height="50%" viewBox="1 24 452 1568" preserveAspectRatio="xMinYMin meet"  >  
<defs>
 <linearGradient id="Lg" x2="0" y2="100%">
  <stop offset="0" stop-color="pink"/>
   <stop offset="7.7%" stop-color="pink"/> 
  <stop offset="7.7%" stop-color="lightblue"/>
  <stop offset="84.9%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<path id="path" stroke="black" stroke-width="2" fill="url(#Lg)"
      
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"
     
    /> 
</svg>

To get clear (non-blurry) borders between colors, it is necessary to repeat the border values of stop offset

<linearGradient id="Lg" x2="0" y2="100%">
  <stop offset="0" stop-color="pink"/>
  <stop offset="7.7%" stop-color="pink"/>
  <stop offset="7.7%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightgreen"/>
  <stop offset="84.9%" stop-color="lightgreen"/>
</linearGradient>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="10%" height="50%" viewBox="1 24 452 1568" preserveAspectRatio="xMinYMin meet"  >  
<defs>
 <linearGradient id="Lg" x2="0" y2="100%">
  <stop offset="0" stop-color="pink"/>
  <stop offset="7.7%" stop-color="pink"/>
  <stop offset="7.7%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightgreen"/>
  <stop offset="84.9%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<path id="path" stroke="black" stroke-width="2" fill="url(#Lg)"
      
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"
     
    /> 
</svg>