Question

14

Filling an SVG path with multiple colors

rated 0 times [ 20] [ 6] / answers: 1 / hits: 20712 / 9 Years ago, sun, march 29, 2015, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynnb

Add To Favorites

Follow

Total Points: 402

Total Questions: 96

Total Answers: 109

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

kaitlynnb questions

1 'node_modules' is not recognized as an internal or external command, operable program or batch file

Tue, Oct 12, 21, 00:00, 3 Years ago

1 Cannot read properties of undefined (reading 'size')

Thu, Sep 16, 21, 00:00, 3 Years ago

1 How to Disable the ENTER Key in React Material UI Autocomplete form

Thu, Aug 26, 21, 00:00, 3 Years ago

1 Get only specific values in array of objects in JavaScript

Tue, Jun 23, 20, 00:00, 4 Years ago

1 Extracting parts of a text in Cypress

Mon, May 20, 19, 00:00, 5 Years ago

View All

answered 9 Years ago aidan · Accepted Answer

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>