Filling An Svg Path With Multiple Colors

I have a map of provinces of a country as an SVG, where each province is an SVG path. The actual SVG is the following province map. What I would like to do is fill a part of the pr

Solution 1:

I think you would be able to use a linear gradient and use two color-stops for each solid color. Something like this

<svgheight="200"width="600"><defs><linearGradientid="solids"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,0,0);stop-opacity:1" /><stopoffset="33%"style="stop-color:rgb(255,0,0);stop-opacity:1" /><stopoffset="33%"style="stop-color:rgb(0,255,0);stop-opacity:1" /><stopoffset="67%"style="stop-color:rgb(0,255,0);stop-opacity:1" /><stopoffset="67%"style="stop-color:rgb(0,0,255);stop-opacity:1" /><stopoffset="100%"style="stop-color:rgb(0,0,255);stop-opacity:1" /></linearGradient></defs><rectwidth="600"height="200"fill="url(#solids)" /></svg>

Solution 2:

It is not possible to do this directly in general (gradients and filters allow you to fill a path with very customized fills but it can get extremely difficult to calculate the right gradient).

The easiest way to do this is to draw the path several times, with different colors and customized stroke-dash-array's.