Как создать прозрачный градиент маски с использованием фильтра 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

Должен ли он быть градиентом или фильтром? Я бы предложил использовать , который
содержит прямоугольник с примененным градиентом, но я не уверен правильно ли я понял
ваши требования.    






  

Смотрите аналогичный пример    

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


Ответ 2

Пример анимации SVG

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



 




Код взят из примера ниже.
Добавлены последовательные  анимации букв с помощью команд skewX() и skewY()