Использование SVG в качестве фонового изображения CSS3 с масштабированием

Когда я использую SVG в фоновом свойстве, например:

.svg-button {
    -webkit-transform: scale(3.0) // root of the problem!
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

В результате получается размытое изображение. В то же время текст в теге с этим стилем ясен. Кроме того, если я масштабирую страницу с помощью CTRL ++ (масштабирование браузера), вместо преобразования свойства все понятно.

Если я заменил свойство фона CSS на:

<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>

в любом случае изображение будет ясно в любом масштабе.

Где проблема?

Образец на jsfiddle

Update: Я нашел дополнительную информацию об этой проблеме:

Ответы

Ответ 1

Для Chrome/Safari IE9/10 я решил использовать свойство масштабирования CSS, а не свойство scale.

.svg-button {
    zoom: 300%;
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

Для Firefox я по-прежнему использую свойство CSS scale, потому что Firefox не поддерживает свойство масштабирования. В то же время Firefox хорошо масштабирует фон SVG. См. результат.

Для IE9 я написал javascript, который временно изменяет свойство ширины CSS и после небольшой задержки возвращает его обратно. Таким образом я принудительно перерисовываю CSS-фон.

Ответ 2

Я снова "играл" с этим и заметил это и для шрифтов. Хотя, похоже, теперь это исправлено (по крайней мере, для шрифтов).

Насколько я понимаю внутреннюю работу, содержимое масштабированного элемента отображается на текстуру, которая, в свою очередь, масштабируется.

В качестве обходного пути попробуйте использовать 3d-перевод и перемещайте элемент по оси z для достижения изменения размера. Это не даст никакого контроля над окончательным результатом.

.svg-button {
    -webkit-transform: perspective(800px) translateZ(-300px);
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}