Мне понадобилось время, чтобы найти решение этой проблемы, которой я был доволен:
Проблема:
SVG-спрайт иконок - скажем, 80px x 3200px
Мы хотим масштабировать каждое их использование в селекторах контента (: до /: после) в разных местах по разным размерам без переопределения ко-ордов каждого спрайта в зависимости от используемого размера.
Таким образом, это решение позволяет вам использовать те же спрайт-коорды в <button>, что и <menuitem>, в то же время масштабируя его.
[data-command]::before {
content: '';
position: absolute;
background-image: url("images/sprite.svgz");
background-repeat: no-repeat;
background-size: cover;
}
button[data-command]::before {
width: 32px;
height: 32px;
}
menuitem[data-command]::before {
width: 24px;
height: 24px;
}
[data-command="cancel"]::before {
background-position: 0% 35%;
}
[data-command="logoff"]::before {
background-position: 0% 37.5%;
}
Используя проценты (до 2 десятичных разрядов) в background-position, а не background-size, как предлагают другие здесь, вы можете масштабировать одно и то же объявление значка до любого размера, без необходимости его повторного объявления.
Процентная доля y представляет собой исходную высоту спрайта / высоту иконки в виде% - в нашем случае здесь 80px * 100 / 3200px == каждый спрайт представлен y-позицией 2,5%.
Если у вас есть состояния наведения / наведения мыши, вы можете удвоить ширину спрайта и указать координату position-x.
Недостаток этого подхода состоит в том, что добавление большего количества значков на более позднем этапе изменит высоту спрайта и, следовательно, y-position%, но если вы этого не сделаете, ваши координаты спрайта будут нуждаться в изменении для каждого масштабированного разрешения. вам требуется.