Страницы

Поиск по вопросам

пятница, 21 февраля 2020 г.

Как создать прозрачный градиент маски с использованием фильтра SVG

#html #css #html5 #css3 #svg


В настоящее время я использую градиент SVG, чтобы применить эффект fade-out для патчей.
Это позволяет начать путь с непрозрачностью 100% в точке x0 и постепенно уменьшать
непрозрачность до 0% в точке x1, где бы они не находились для конкретного пути,  к
которому  применяется градиент:   


    
    
       


Это прекрасно работает при применении к стилю обводки контура:  

    


Однако проблема заключается в том, что при использовании данного стиля обводки я
не могу применить дополнительно другие стили обводки, и по умолчанию они остаются черными.  

Я бы хотел, чтобы стиль обводки был выполнен с использованием любого цвета, который
я назначу, а затем применить градиент к непрозрачности обводки или применить фильтр
SVG для создания эффекта fade-out.    

Я попытался использовать фильтры SVG - feComponentTransfer с feFuncA, но не смог
получить то, что сработало бы.  

Цвет обводки необходимо отдельно рассчитывать для каждого пути. Таким образом, решение
установить цвет в градиенте не будет масштабироваться.   

Перевод ответа: How to create a transparency gradient mask using an SVG filter @drarmstr 
    


Ответы

Ответ 1



Должен ли он быть градиентом или фильтром? Я бы предложил использовать , который содержит прямоугольник с примененным градиентом, но я не уверен правильно ли я понял ваши требования. Instant Web 2.0 Смотрите аналогичный пример Перевод ответа: How to create a transparency gradient mask using an SVG filter @Erik Dahlström

Ответ 2



Пример анимации SVG Код взят из примера ниже. Добавлены последовательные анимации букв с помощью команд skewX() и skewY() реализующие вращение букв вокруг осей Xи Y соответственно. Instant Web 2.0 Код взят из примера ниже. Добавлены последовательные анимации букв с помощью команд skewX() и skewY()

Комментариев нет:

Отправить комментарий