viksnamax
@viksnamax
All-in-One

Как правильно настроить внутреннюю тень SVG?

Проблема заключается в том, что тень не полностью прилегает к контуру фигуры, почему так происходит и как это исправить? Единственное решение, которое мне удалось найти это увеличить значение размытия по Гауссу, но это костыль, который мне не подходит!
Пример
Здесь я выделил красным, про что я говорю
5e78aeca27c26605878502.png
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
Тут все дело в том, что вы используете для создания тени не саму кривую штуку, а "прозрачность" вокруг нее. Это немного нелогично с точки зрения понятия "тень". То есть у вас тень отбрасывает "пустота" вокруг кривой штуки (и эта "пустота" еще и обрезается в неудачном месте). Тут нужно использовать обратный подход, когда именно кривая штука используется для создания тени. В вашем примере для этого нужно поменять tableValues в feFuncA с "1 0" на "0 1" и в первом feComposite заменить "in" на "out".

Как альтернативный пример:


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы