Заполнить SVG-карту “шумом”

277

20 января 2018, 02:25

Нужно сверстать вот такую карту c эффектом заполнения "шумом":

На данный момент получается вот такой вариант: https://codepen.io/Cheg/pen/mpQzoO

.branches-map__region {
    fill:#e5e5e5;
    stroke:#fff;
    stroke-width:.5px;
}

Как видно, точки на карте получаются разноцветными, а нужно, чтобы они были в цветовом диапазоне "фона".

Как такое можно реализовать?

Уточнение: Цветные сектора (красные и светло-серые) - не hover-эффект, а просто статичные цвета для данных регионов.

Answer 1

Эффект шума можно получить несколькими приемами.

Приведу два из них:

С помощью комбинации различных SVG фильтров, но применение фильтров, особенно фильтров размытия Гаусса и фильтра турбуленсе сильно нагружает процессор.

LeaVerou удалось найти удачное сочетание фильтров для создания эффекта шума, но она предупреждает о возможных проблемах с производительностью

SVG noise (Warning: Might be slow!)

Второй путь,- создание скриншота с образца шума и использование получившейся картинки в качестве паттерна для заполнения объекта

Ниже в примере показаны эти два способа для создания эффекта шума:

<svg width="100%" height="100%" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
  <defs> 
<filter id="noise"> 
	<feTurbulence type="fractalNoise" baseFrequency=".7" /> 
	<feComponentTransfer> 
	        <feFuncR type="linear" slope="2" intercept="-1"/> 
	        <feFuncG type="linear" slope="2" intercept="-1"/> 
	        <feFuncB type="linear" slope="2" intercept="-1"/> 
	</feComponentTransfer> 
	<feColorMatrix type="saturate" values="0"/> 
	<feComponentTransfer> 
		<feFuncA type="table" tableValues="0 .3"/> 
	</feComponentTransfer> 
</filter>  
<pattern id="MapPattern" 
             x="0" y="0" width="100%" height="100%" 
             patternUnits="objectBoundingBox" 
			 patternContentUnits="objectBoundingBox" > 
		 <image xlink:href="https://i.stack.imgur.com/NlbBq.png" width="1" height="1"  />					  
	</pattern>		 
</defs> 
<rect width="400" height="400" fill="#DBDBDB"  /> 
<text font-size="20" x="50" y="30" > Filter noise </text> 
<rect x="50" y="50" width="100" height="100" stroke="red" stroke-width="2" filter="url(#noise)" />    
 
<text font-size="20" x="210" y="30" > Pattern noise </text> 
<rect x="200" y="42" width="120" height="120" stroke="white" fill="url(#MapPattern)" /> 
 
</svg>

У обоих способов есть преимущества и недостатки:

фильтр сильно нагружает "железо" ПК, но заполнение объекта более равномерное.
Заполнение паттерном объектов может выглядеть неравномерно из-за разного размера и масштабирования, но не требует столько ресурсов производительности, как применение фильтров. Например на карте России сравните Красноярский край и любую из центральных областей.

Ниже пример карты России с техникой заполнения паттерном шума.

Demo