Объединить clipPath, pattern и linearGradient в SVG

#html #css #svg

Я пытаюсь создать фон, состоящий из градиента нескольких точек, от зеленого до желтого,
слева направо. Поэтому идея заключалась в том, чтобы создать путь, заполнить его градиентом
и clipPath с pattern:   








Градиент работает нормально, clip-path работает нормально (автономно). Однако они
не собираются вместе.
    

Ответы

Ответ 1

Только форма элементов в  имеет значение. Цвет и заливка игнорируются,
поэтому вы не можете этого сделать.  

Но вместо этого вы можете использовать :  








Источник: Combine clipPath, pattern, and linearGradient in SVG


Ответ 2

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

Техника комбинации clipPath, pattern и linearGradient даёт широкий диапазон для творчества
в веб строительстве.    


Изменяя параметры width, height в pattern можно получить разные
формы шаблона для заполнения фигур, а также горизонтальные и
вертикальные полосы.
Применение различных команд анимации позволяет оживить картинку.
Добавляя текст можно получить дополнительные эффекты.
Добавление маски вместе с градиентом даёт возможность получить
разноцветный круг с мягкими градиентными цветами.   


Вертикальные полосы   

Получаются за счет превышения в несколько раз ширины над высотой в патерне width="0.05"
height="0.01".      

Анимация полос достигается изменением радиуса окружности, входящей в паттерн:    

 
        
 ` 




 




Горизонтальные полосы    

Здесь у патерна - width="0.005" height="0.05"> ширина меньше высоты    



 




Горизонтальные полосы в градиентном цветном круге  

Добавляем к маске строку с шириной строки   


          
    `   




 




Изменение размера фигур паттерна      

Достигается изменением радиуса окружностей, входящих в паттерн