Почему svg не читает градиент?

Question

[Georgi]

Приветствую. Возникла проблема с отображением svg иконки на сайте.

html-код

<svg height="40" width="40"><use xlink:href="icon/icons.svg#telegram"></use></svg>

код icons.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 153 44">
 <style>:root&gt;svg{display:none}:root&gt;svg:target{display:block}</style>
	<svg xmlns="http://www.w3.org/2000/svg" id="telegram" viewBox="0 0 40 40" fill="none">
		<rect width="40" height="40" fill="url(#paint0_linear_1_62)"/>
		<path d="M30.9799 10.8132C31.1668 9.60498 30.0181 8.65132 28.9438 9.123L7.54723 18.5172C6.77684 18.8555 6.8332 20.0225 7.6322 20.2769L12.0446 21.6821C12.8869 21.9503 13.7987 21.8115 14.5342 21.3035L24.4825 14.4305C24.7825 14.2232 25.1095 14.6498 24.8531 14.9139L17.6921 22.2969C16.9975 23.0132 17.1353 24.2268 17.971 24.7508L25.9885 29.7785C26.8877 30.3423 28.0445 29.7759 28.2127 28.6892L30.9799 10.8132Z" fill="white"/>
		<defs>
			<linearGradient id="paint0_linear_1_62" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
				<stop stop-color="#37BBFE"/>
				<stop offset="1" stop-color="#007DBB"/>
			</linearGradient>
		</defs>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" id="facebook" viewBox="0 0 40 40" fill="none">
		<rect width="40" height="40" fill="url(#paint0_linear_1_45)"/>
		<path d="M26.0968 21.3448L26.8194 16.8621H22.4839V13.7241C22.4839 12.469 22.9355 11.4828 24.9226 11.4828H27V7.35862C25.8258 7.17931 24.5613 7 23.3871 7C19.6839 7 17.0645 9.24138 17.0645 13.2759V16.8621H13V21.3448H17.0645V32.731C17.9677 32.9103 18.871 33 19.7742 33C20.6774 33 21.5806 32.9103 22.4839 32.731V21.3448H26.0968Z" fill="white"/>
		<defs>
			<linearGradient id="paint0_linear_1_45" x1="20" y1="38.8313" x2="20" y2="0" gradientUnits="userSpaceOnUse">
				<stop stop-color="#0062E0"/>
				<stop offset="1" stop-color="#19AFFF"/>
			</linearGradient>
		</defs>
	</svg>
	
</svg>

В самом icon/icons.svg#telegram градиент отображается - на сайте нет.
Благодарю за помощь.

Comments

[Ankhena]

Градиенты не работают через спрайт. На данный момент по крайней мере.

Answer 1

[Adamos]

Вторая ссылка в гугле: https://stackoverflow.com/questions/38990880/svg-g...

Comments

[Georgi]

Не помогло ничего.
- Переименование не помогло
- Использовать style="fill: url('#gradient1')" не помогло

Самое главное - это градиент работает, если открыть саму иконку по ссылке icon/icons.svg#telegram, но не работает, если вывести ее на странице в виде

[Adamos]

Georgi, следующим номером гуглятся глюки Хрома на этот счет.
Стоит проверить ФФ, например, чтобы конкретизировать проблему.

[Adamos]

Georgi, да и в Хроме стоит точно убедиться, что он не закешировал старую картинку, с него станется...

[Georgi]

Adamos, и через инкогнито смотрел и кэш чистил)

[Georgi]

Adamos, нашел похожий вопрос
https://ru.stackoverflow.com/questions/1239844/svg...

[Adamos]

Georgi, по ссылке, собственно, разъясняется возможная причина глюка: id градиента совпадает с другим id, который тоже встречается где-то в дереве.