Menu
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!
753
The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. Note: As a presentation attribute, fill-rule can be used as a CSS property. You can use this attribute with the following SVG elements: <altGlyph> <path>
You're largely limited to a single color with icon fonts in a way that SVG isn't, but still, it is appealingly easy to change that single color with color . Using inline SVG allows you to set the fill , which cascades to all the elements within the SVG, or you can fill each element separately if needed.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
