iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется

Как работать с svg спрайтами?

В общем собрал я в gulp svg спрайт через symbol. он имеет вид:
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
</svg>


пытаюсь его вставить через background так:
.my-icon {
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	height: 100px;
	background: url('svg-symbols.svg#gamecontroller') no-repeat;
	background-size: contain;
}

но ничего не выходит. что я делаю не так?
  • Вопрос задан
  • 543 просмотра
Пригласить эксперта
Ответы на вопрос 1
petermzg
@petermzg
Самый лучший программист
1. symbol это описательный элемент, он не отображается, но его можно использовать в элементе use
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
    <use xlink:href='#gamecontroller' />
  </svg>

2. Как реализовать тот подход, что вы желаете (SVG fragment) написано тут
3. При таком подходе CSS стили к элементам SVG не применимы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы