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

Question

[Александр]

Имеется картинка в SVG непосредственно в коде страницы

<linearGradient id="linear-gradient">
					    	<stop offset="0%" stop-color="#7fce5c"/>
					    	<stop offset="100%" stop-color="#0e999f"/>
					  	</linearGradient>
					    <path fill="url(#linear-gradient)"   .......

Можно вынести градиент в CSS, тем более, что картинка не одна и градиент нужен для них всех?

Comments

[qwanto]

Можно вынести цвета градиента в переменную.
SVG:

<linearGradient id="gradient">
    <stop offset="0%" stop-color="var(--stop-grad-1)" />
    <stop offset="50%" stop-color="var(--stop-grad-2)" />
    <stop offset="100%" stop-color="var(--stop-grad-3)" />
</linearGradient>

CSS:

#gradient {
  --stop-grad-1: #009688;
  --stop-grad-2: #3f51b5;
  --stop-grad-3:  #ff5722;
}

Answer 1

[Антон Мудренок]

Вам не нужен 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>

Comments

[Александр]

Не нужен или нельзя?) У меня получается десяток картинок в коде с одинаковым

<linearGradient id="gradient">
            <stop offset="0%" style="stop-color: deepPink"></stop>
            <stop offset="100%" style="stop-color: #009966"></stop>
        </linearGradient>

Оптимальнее было бы вынести в CSS. И когда скрываю на определенном разрешении первую картинку в коде, то следующие теряют градиент ( id="gradient" , потому что обозначенный первой картинкой, получается скрытым)- это на Мозилле так.

[Антон Мудренок]

Александр: в начале html файла добавьте svg элемент в котором будут все def-ы и symbol-ы. Потом используйте их по id где угодно на странице — ничего не будет пропадать.
Вот в таком стиле: codepen.io/mudrenok/pen/xqzxoz?editors=1000 (тут мне нужны были только symbol)

[Александр]

Антон Мудренок: дело в том, что первые несколько SVG в меню находятся, которые скрываются. И из-за них другие перестают отображаться. В общем, делаю вывод, что в каждом нужно свой уникальный ID использовать, на один класс не завязать это все.

[Антон Мудренок]

Александр: если вы никак вынести не можете заранее ваши градиенты и при это все удаляется то да, есть только вариант с js.
Аналогичная история и с CSS, вы же не можете налету файл стилей поменять. А что касается связки css/svg то вы можете использовать в svg все через class="и тут ваш css класс со стилями". Поэкспериментируйте, может вашу проблему получится так решить. Но что касается градиентов, то все всегда их делают в def-ах.

[Александр]

Решением стало вынести в отдельный скрытый SVG градиент с айди в начале страницы.