CODEWITHSUNDEEP
javascriptcsssvg
eatplayrove
eatplayrove

Reputation: 371

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 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!

Upvotes: 19

Views: 26222

Answers (2)

torox
torox

Reputation: 490

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>

Upvotes: 20

Michael Mullany
Michael Mullany

Reputation: 31705

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.

Upvotes: 4

Related Questions