Как правильно задавать параметры для фильтра, чтобы не обрезалось по квадрату.
Не могу понять, где эта область видимости задается?
.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;
}
Ответ
Область видимости действия фильтра на объект называется - 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;
}
Комментариев нет:
Отправить комментарий