Как установить символ из svg спрайта на фон?

Question

[Дима Паутов]

Добрый вечер. Не могу установить svg символ в качестве фона.

Вот кусочек из самого svg файла:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" width="32" height="768" viewBox="0 0 32 768">
	<symbol id="icoArrowRight" viewBox="0 0 31.5 31.5" width="32" height="32">
		<path d="M31.2,15c0.4,0.4,0.4,1.1,0,1.6l-10,10c-0.4,0.4-1.1,0.4-1.6,0c-0.4-0.4-0.4-1.1,0-1.6l8-8H1.1c-0.6,0-1.1-0.5-1.1-1.1  c0-0.6,0.5-1.1,1.1-1.1h26.6l-8-8c-0.4-0.4-0.4-1.1,0-1.6c0.4-0.4,1.1-0.4,1.6,0L31.2,15z"/>
	</symbol>
</svg>

CSS:

.leftMenu .level1 > li > a {
    padding: 4px 0 4px 30px;
    background: url(../img/ico/icons.svg#icoArrowRight) center left no-repeat;
    font: 300 17px 'Muller';
    color: #000;
}

Но он не работает. Хотя если просто вставить символ через тег use, то все работает. В чем проблема?

Answer 1

[Петр]

symbol это описательный элемент.
Вставьте use в свой svg и background: url(../img/ico/icons.svg) center left no-repeat; будет работать

Answer 2

[trushka]

Можно вместо simbol использовать svg, но только с размерами, равными размерам "верхнего" svg. Так же добавить в него style с правилом svg>svg:not(:target) {display: none} Тогда по идее отобразится только нужный символ, если указать адрес с его id в качестве хэша. Но надо тогда ещё background-size указывать, соответствующий вьюпорту символа