Листовка - заливка многоцветным узором

Мне нужно реализовать многоцветную заливку полигона. Заливка будет условно отформатирована в соответствии со свойствами объекта.

Допустим, мне нужен многоугольник с трехцветным узором, например:

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.

Мне известны следующие плагины:

К сожалению, первый не поддерживает многоцветные шаблоны, а второй поддерживает только изображения.

Есть идеи?

Ознакомьтесь с шаблонами SVG : css-tricks.com/snippets/svg/svg-patterns

ccprog 23.12.2020 16:10

@ccprog проблема в том, что SVG создаются Leaflet, и поэтому нет прямого способа определить шаблон внутри SVG.

treecon 23.12.2020 16:35
Создание фильтров для вашего сайта
Создание фильтров для вашего сайта
Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
2
2
1 409
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Вот рабочая рабочий пример: https://jsfiddle.net/oyu60f1t/

Другие вопросы по теме