Как path элемент залить градиентом + наложить картинку?

Question

[Вадим Бричок]

Всем привет!
Никак не могу придумать (через недостаток знаний, скорее всего), как наложить картинку в центре фигуры. Заливка через градиент - тут все ясно. А, вот картинка сверху никак не выходит.
prntscr.com/ldydpm - такая карта имеется. Примерно так prntscr.com/ldyexl надо наложить картинки.

Answer 1

[Максим]

не картинки наверно а иконки ...
иконку нарисовать самому и вставит по верх
и делать не полигоном а path

Comments

[Вадим Бричок]

Объясню, почему стукнуло в голову делать фон картинкой.
Суть в том, чтобы не вручную задавать позицию иконки, а скриптом. Слишком много мороки в каждом районе проставить иконки)) Поэтому, был написан скрипт, который обходит районы, и, если у него есть определенный параметр data, проставляет после него иконку.

Вот этот кусок:

$('#rajony .rajon').each(function(e){
						var kolosok = $(this).attr('data-semena'),
								secur = $(this).attr('data-security'),
								mitn = $(this).attr('data-tamozhnja'),
								t = parseInt($(this).position().top),
								l = parseInt($(this).position().left),
								w = parseInt($(this)[0].getBoundingClientRect().width),
								h = parseInt($(this)[0].getBoundingClientRect().height),
								pos_l,
								pos_t;
								console.log(l, t, w, h);
								pos_l = (l+w/2-230)/1.1  ;
								pos_t = (t+h/2-130)/1.1  ;
							$(this).wrap('<g class="wrap_rajon"></g>');
							if(kolosok){
								$(this).after(icon_kolosok);
								$(this).parent().find('g').css('transform','translate('+ pos_l +'px, '+ pos_t +'px) scale(0.7)');
							}
							if(secur){
								$(this).after(icon_secur);
								$(this).parent().find('g').css('transform','translate('+ pos_l +'px, '+ pos_t +'px) scale(0.7)');
							}
							if(mitn){
								$(this).after(icon_mitn);
							}
				});

Но, если меняем ширину окна - иконки не на своих местах.
А, надо чтобы иконки всегда были в центре(примерно) района.
Возможно, я не правильно получаю координаты path..?

В общем, потратил целый день сегодня на это безрезультатно.
И тут пришла "мысля" что, наверное, можно же вставить эту иконку на фон.

Метод реализации значения не имеет) Главное, чтобы это все вручную не прописывать)

Прилагаю ссылку на эту страницу singenta.abvv.group/index-kiev.html. Возможно, это поможет понять ситуацию.

[Максим]

Вадим Бричок, если вы всю карту нарисуете в svg то ни чего у вас слетать не будет

[Вадим Бричок]

Не совсем понял... Она же в svg вся (экспортировано с иллюстратора).

Answer 2

[Вадим Бричок]

Нашел решене codepen.io/gratulen/pen/zmJXzq