@sanok_ps
Веб-разработчик, php-бекенд, Вордпресс

Как вынести градиент для SVG в CSS?

Имеется картинка в SVG непосредственно в коде страницы
<linearGradient id="linear-gradient">
					    	<stop offset="0%" stop-color="#7fce5c"/>
					    	<stop offset="100%" stop-color="#0e999f"/>
					  	</linearGradient>
					    <path fill="url(#linear-gradient)"   .......

Можно вынести градиент в CSS, тем более, что картинка не одна и градиент нужен для них всех?
  • Вопрос задан
  • 6661 просмотр
Решения вопроса 1
mudrenokanton
@mudrenokanton
frontend dev
Вам не нужен CSS. Можно сделать так:
<svg>
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" style="stop-color: deepPink"></stop>
            <stop offset="100%" style="stop-color: #009966"></stop>
        </linearGradient>
    </defs>
 
    <rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>
</svg>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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