svg GaussianBlur ломается область видимости

#css3 #svg #background

Как правильно задавать параметры для фильтра, чтобы не обрезалось по квадрату.
 Не могу понять, где эта область видимости задается?  



.decor_background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top left, #111 2%, #221c44);
  filter: blur(20px);
  z-index: 1;
}

.svg_elements {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.svg_circle {
  width: 50px;
}

#svg_elements__full {
  width: 100%;
}

.svg_circle {
  fill: none;
  stroke: #68CADA;
  stroke-width: 5;
}



  




    

Ответы

Ответ 1

Область видимости действия фильтра на объект называется - Filter effects region

Это прямоугольник, с габаритными размерами width="X%", height="Y%" заданными в определении
фильтра        

Также могут быть заданы координаты левого верхнего угла региона действия фильтра
- x="X%" y="Y%"    

Если эти все параметры не указаны, то они будут по умолчанию равны: 

x="-10%", y="-10%" width="120%" height="120%"   

Вы  указали в своем примере только width="150%" без height     

В результате регион действия фильтра уменьшился и подрезал края.  

Внизу пример с новыми параметрами региона фильтра: 



.decor_background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top left, #111 2%, #221c44);
  filter: blur(20px);
  z-index: 1;
}

.svg_elements {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.svg_circle {
  width: 50px;
}

#svg_elements__full {
  width: 100%;
}

.svg_circle {
  fill: none;
  stroke: #68CADA;
  stroke-width: 5;
}



  





Update

Ваш пример  работает только Chrome, Opera, Yandex, но не работает в Firefox

Необходимо убрать параметр in="offOut" из определения фильтра и тогда будет работать
и в Firefox  



.decor_background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top left, #111 2%, #221c44);
  filter: blur(20px);
  z-index: 1;
}

.svg_elements {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.svg_circle {
  width: 50px;
}

#svg_elements__full {
  width: 100%;
}

.svg_circle {
  fill: none;
  stroke: #68CADA;
  stroke-width: 5;
}