Svg 单张-多色图案填充

我需要在多边形功能中实现多色填充。填充将根据要素特性有条件地格式化

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

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

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

这在传单上怎么可能

在一个简单的

div

中，可以通过以下CSS功能轻松实现这一点：

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

然而，传单使用SVG/Canvas

我知道以下插件：

不幸的是，第一个似乎不支持多色模式，第二个只支持图像

有什么想法吗？

对于任何感兴趣的人，以下是我提出的解决方案：

当我们创建多边形时，我们将

fillColor

值设置为指向我们稍后定义的线性渐变

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

条纹使用线性渐变创建，无需颜色混合，如下所示：

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

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

这里是一把工作小提琴：

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

当我们创建多边形时，我们将

fillColor

值设置为指向我们稍后定义的线性渐变

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

条纹使用线性渐变创建，无需颜色混合，如下所示：

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

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

---

这里有一个工作小提琴：

让自己熟悉：@ccprog问题是SVG是由传单创建的，因此，没有直接的方法来定义SVG内部的模式。让自己熟悉：@ccprog问题是SVG是由传单创建的，因此，在SVG内部没有直接的方式来定义模式。