Answer the question
In order to leave comments, you need to log in
How to set character from svg sprite to background?
Good evening. Can't set svg symbol as background.
Here is a snippet from the svg file itself:
<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>
.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;
}
Answer the question
In order to leave comments, you need to log in
symbol is a descriptive element.
Insert use in your svg and background: url(../img/ico/icons.svg) center left no-repeat; will work
You can use svg instead of simbol, but only with dimensions equal to the size of the "top" svg. Also add style to it with the rule svg>svg:not(:target) {display: none} Then, in theory, only the desired character will be displayed if you specify the address with its id as a hash. But then you also need to specify the background-size corresponding to the symbol's viewport
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question