svg - 传单-多色图案填充

Question

我需要在多边形要素中实现多色填充。填充将根据要素属性进行有条件的格式化。

假设我需要一个具有 3 色图案的多边形，如下所示:

let fillPalette = ['orange', 'green', 'blue'];

这在传单中怎么可能？

在一个简单的 div 中，这可以通过以下 CSS 函数轻松实现:

background: repeating-linear-gradient(
  -45deg,
  orange,
  orange 10px,
  green 10px,
  green 20px,
  blue 20px,
  blue 30px
);

但是，Leaflet 使用 SVG/Canvas。

我知道以下插件:

• https://github.com/teastman/Leaflet.pattern

• https://github.com/cloudybay/leaflet-polygon-fillPattern

不幸的是，第一个似乎不支持多色图案，第二个仅支持图像。

有什么想法吗？

Answer 1

对于任何感兴趣的人，这是我提出的解决方案:

当我们创建多边形时，我们将fillColor值设置为指向我们稍后定义的线性渐变。

let polygon = L.polygon(coords, {fillColor: 'url(#stripes)', fillOpacity: 1})

条纹是使用线性渐变创建的，没有颜色混合，如下所示:

let fillPalette = ['orange', 'green', 'blue'];

let gradientString = `<linearGradient id="stripes" x1="0%" y1="0%" x2="100%" y2="100%">
   <stop offset=0 stop-color=${fillPalette[0]} />
   <stop offset=33% stop-color=${fillPalette[0]} />
   <stop offset=33% stop-color=${fillPalette[1]} />
   <stop offset=66% stop-color=${fillPalette[1]} />
   <stop offset=66% stop-color=${fillPalette[2]} />
   <stop offset=100% stop-color=${fillPalette[2]} />
</linearGradient>`

然后我们需要在 SVG 内部定义上述线性渐变。 SVG 可以按如下方式操作:

let svg = document.getElementsByTagName('svg')[0];
let svgDefs = document.createElementNS("http://www.w3.org/2000/svg", 'defs');
svgDefs.insertAdjacentHTML('afterbegin', gradientString);
svg.appendChild(svgDefs);

这是一个工作 fiddle :https://jsfiddle.net/oyu60f1t/