Почему не показывается картина svg sprite через background?

Question

[Дмитрий Тарасов]

Почему не показывается картина svg sprite через background ?

Код спрайта

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<symbol id="icon-home2" viewBox="0 0 32 32">
<title>home2</title>
<path d="M16 1l-16 16 3 3 3-3v13h8v-6h4v6h8v-13l3 3 3-3-16-16zM16 14c-1.105 0-2-0.895-2-2s0.895-2 2-2c1.105 0 2 0.895 2 2s-0.895 2-2 2z"></path>
</symbol>
<symbol id="icon-home3" viewBox="0 0 32 32">
<title>home3</title>
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
</symbol>
<symbol id="icon-office" viewBox="0 0 32 32">
<title>office</title>
<path d="M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z"></path>
</symbol>
</defs>
</svg>

Делаю так

background: red url(/images/icons/symbol-defs.svg#icon-office) no-repeat;

Картинка не подгружается, делаю без спрайта все работает.

Comments

[iBird Rose]

насколько я помню именно svg спрайты через background не работают. только отдельные svg можно

Answer 1

[trushka]

надо задать svg width и height, а вместо symbol использовать банально g, например. И defs не нужен, прямо в svg писать.. И добавить в svg style где-то такого содержания:

svg>g {display:none}
:target {display: inline}

Так по идее должно рабоьать

Answer 2

[Максим Тимофеев]

https://stackoverflow.com/questions/28477256/setti...