Question

我有一个国家/地区的省份地图作为SVG，其中每个省都是SVG路径。实际的SVG是以下province map。

我想做的是用一种颜色填充省份（路径）的一部分，用另一种颜色填充第二部分，其余用另一种颜色填充。因此，例如，我将在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>

Answer 2

一般情况下无法直接执行此操作（渐变和滤镜允许您使用非常自定义的填充填充路径，但计算正确的渐变非常困难。）

最简单的方法是多次绘制路径，使用不同的颜色和自定义的描边 - 破折号阵列。

使用多种颜色填充SVG路径

2 个答案: