D
D
Dima Pautov2016-09-29 20:11:05
css
Dima Pautov, 2016-09-29 20:11:05

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>

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;
}

But it doesn't work. Although if you just insert a symbol through the use tag, then everything works. What is the problem?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
Peter, 2016-09-29
@petermzg

symbol is a descriptive element.
Insert use in your svg and background: url(../img/ico/icons.svg) center left no-repeat; will work

T
trushka, 2016-09-29
@trushka

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 question

Ask a Question

731 491 924 answers to any question