Что не так с этим спрайтом?

Question

[Islam Ibakaev]

Что-то не выходит поработать со спрайтом
Пытаюсь подобрать background-position - ничего не видно

.icon {
	background-repeat: no-repeat;
	background-image: url('http://krona.mosco-web.ru/sprite.svg');
	background-size: 700px 194px;
	display: inline-block;
}

.icon--hamburger {
	background-position: 0 0;
	width: 21px;
	height: 17px;
}

<i class="icon icon--hamburger"></i>

песочница - https://codepen.io/dagman/pen/EJZXzX

Может дизайнер неверно сформировал спрайт?

Answer 1

[RAX7]

неверный background-position
https://codepen.io/anon/pen/MRJENd

Comments

[Islam Ibakaev]

Пытаюсь подобрать background-position - ничего не видно

[RAX7]

Islam Ibakaev, обновил

[Islam Ibakaev]

я же говорю, что-то не так с этим спрайтом)
всегда задавал положительные значения, чтобы дойти до нужной иконки.
почему отрицательные? что не так с эти спрайтом?

[RAX7]

Islam Ibakaev, все с ним так, он работает как и обычный спрайт в png
https://codepen.io/anon/pen/JVEZLP

[Islam Ibakaev]

RAX7, выходит, что начало координат - это левый нижний угол
обычно отсчёт ведётся от левого верхнего угла. Например, на этом сайте дизайнер предоставил мне спрайт, в котором отсчёт идёт от левого верхнего угла.

[Islam Ibakaev]

хотя по x ты указал 287px... что-то не сходится...

[Islam Ibakaev]

не пойму, где начинается отсчёт в этом спрайте?

[RAX7]

Islam Ibakaev, нет. Возможно следует освежить свои знания https://learn.javascript.ru/css-sprite#shag-4-sdvi...

Answer 2

[tyzberd]

svg спрайты используются не так.
https://css-tricks.com/svg-symbol-good-choice-icons/
в use xlink:href="#shape-icon-1" указываете ссылку на спрайт с id

Comments

[Islam Ibakaev]

что не так с моим спрайтом?

[Иван Фронтендов]

tyzberd , вы конечно удивитесь, но свг спрайты из symbols только один из вариантов создания спрайта для свг иконок.

[tyzberd]

Иван Фронтендов, просто делать через background нет смысла, лучше уже картинкой