使用多种颜色填充SVG路径 [英] Filling an SVG path with multiple colors

问题描述

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

我想做的是用一种颜色填充省份（路径）的一部分，用另一种颜色填充第二部分，其余部分用另一种颜色填充。因此，例如，我将有33.33％的x轴上的路径填充颜色a，从33.33到66.66％的颜色b，其余的颜色c。

这是否可能？我已经看到线性渐变，但不是渐变，我想有纯色。

谢谢！

解决方案

我想你将能够使用线性渐变，并为每个纯色使用两个颜色停止。类似这样的东西

 < svg height =200width =600> < defs> < linearGradient id =solidsx1 =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 =600height =200fill =url（#solids）/>< / svg>  

div>

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!

解决方案

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>

这篇关于使用多种颜色填充SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！