使用多种颜色填充SVG路径

Question

我有一个国家的省份地图作为SVG,其中每个省都是SVG路径.实际的SVG是以下省份地图.

我想做的是用一种颜色填充省份(路径)的一部分,用另一种颜色填充第二部分,其余用另一种颜色填充.因此,例如,我将在x轴上有33.33%的路径填充颜色a,从颜色b的33.33到66.66%,其余颜色为c.

这可能吗？我见过线性渐变,但我想要的是纯色渐变.

谢谢!

Answer 1

我认为你可以使用线性渐变,并为每种纯色使用两个颜色停止.像这样的东西

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