18

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 province (the path) with one color, a second part with another, and the rest with another color. So for example I would have 33.33% percent of the path on the x-axis filled with color a, from 33.33 to 66.66% with color b, and the rest with color c.

Is this possible? I have seen linear gradients, but rather than a gradient I would like to have solid colors.

Thanks!

Improve this question
3
  • 1
    A gradient can have solid colors with appropriate color stops. Frankly though, it would probably be easier to use separate paths.
    – Paulie_D
    Commented Mar 29, 2015 at 22:00
  • You could probably do this by drawing the shape several times with different colors and clip paths.
    – Ilmari Karonen
    Commented Mar 29, 2015 at 22:26
  • I would also use symbols as not to repeat each shape multiple times and getBBox() to get the size of each shape and divide by 3
    – airnan
    Commented Mar 30, 2015 at 2:43

2 Answers 2

Reset to default
19

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>

Improve this answer
0
4

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.