Как сделать градиент в спрайте svg?

Question

[Евгений]

Дан спрайт svg который находится в отдельном файле

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol viewBox="0 0 20 20" id="option">
		<linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".5" y1="10" x2="19.5" y2="10"><stop offset="0" stop-color="#EB2626"/><stop offset=".8" stop-color="#FF7336"/><stop offset="1" stop-color="#FDC16C"/></linearGradient>
		<path fill="url(#a)" d="M17.705 3.943v-2.918c0-.565-.458-1.025-1.02-1.025-.563 0-1.021.459-1.021 1.025v2.919c-1.07.418-1.795 1.46-1.795 2.635s.725 2.218 1.795 2.636v9.76c0 .565.457 1.024 1.021 1.024.562 0 1.02-.459 1.02-1.024v-9.76c1.071-.418 1.795-1.46 1.795-2.636s-.724-2.218-1.795-2.636zm-.245 2.636c0 .429-.348.779-.774.779-.428 0-.776-.35-.776-.779s.349-.778.776-.778c.426 0 .774.349.774.778zm-6.44 3.324v-8.878c0-.566-.458-1.025-1.02-1.025-.563 0-1.021.459-1.021 1.025v8.878c-1.071.418-1.795 1.461-1.795 2.637 0 1.175.724 2.217 1.795 2.635v3.801c0 .565.458 1.024 1.021 1.024.562 0 1.02-.459 1.02-1.024v-3.801c1.071-.418 1.795-1.46 1.795-2.635-.001-1.177-.724-2.219-1.795-2.637zm-.246 2.637c0 .429-.347.777-.774.777s-.775-.349-.775-.777c0-.43.348-.779.775-.779s.774.349.774.779zm-6.439-8.597v-2.918c0-.566-.458-1.025-1.021-1.025-.562 0-1.02.459-1.02 1.025v2.919c-1.07.418-1.794 1.46-1.794 2.635s.724 2.218 1.795 2.636v9.76c0 .565.458 1.024 1.02 1.024.563 0 1.021-.459 1.021-1.024v-9.76c1.07-.418 1.794-1.461 1.794-2.636 0-1.176-.724-2.218-1.795-2.636zm-.245 2.636c0 .429-.348.779-.776.779-.427 0-.774-.35-.774-.779s.347-.778.774-.778c.428 0 .776.349.776.778z"/>
	</symbol>
</svg>

В html к нему обращаемся

<svg width="20" height="20" class="svg"><use xlink:href="img/sprite.svg#option"></use></svg>

Суть проблемы в том, что градиент не показывается, даже сам svg не видим. Но когда

<svg width="20" height="20" class="svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".5" y1="10" x2="19.5" y2="10"><stop offset="0" stop-color="#EB2626"/><stop offset=".8" stop-color="#FF7336"/><stop offset="1" stop-color="#FDC16C"/></linearGradient><use xlink:href="img/sprite.svg#option"></use></svg>

добавляем на страницу, то всё нормально отображается

Answer 1

[Dymok]

Уже неактуально, но вдруг кто-то, как и я, будет искать:
нужно поместить svg-спрайт в контейнер, затем скрыть его без использования display: none; Например так:

height: 0; width: 0; position: absolute; visibility: hidden;

Источник - https://stackoverflow.com/questions/24806913/how-c...

Comments

[Massalina]

Привет! А откуда ты читаешь этот файл? Данный спрайт находится в формате svg? У меня похожая проблема. Не могу решить.

[Dymok]

Massalina, у меня это был svg-спрайт, заинлайненный в html