Filling an SVG path with multiple colors

Question

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

Answer 1

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

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

Answer 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.