Imagen de fondo al igual que con la ampliación

Question

Cuando uso SVG en propiedad background de esta manera:

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

me sale la imagen borrosa como resultado. Al mismo tiempo, el texto en la etiqueta con este estilo es claro. Además, si escalo la página usando CTRL ++ (zoom del navegador) en lugar de transformar la propiedad todo está claro.

Si sustituyo CSS propiedad background en:

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

la imagen es clara en cualquier escala, en cualquier caso.

¿Dónde está el problema?

Muestra de jsfiddle

Actualización: me encontré con algo más de información acerca de este problema:

1. StackOverflow question
2. Bug ticket for Chrome (hice mi prueba bajo Safari/Chrome/IE9/10 y el comportamiento es el mismo.

Answer 1

Para Chrome/Safari IE9/10 He decidido usar la propiedad de zoom CSS en lugar de la propiedad scale.

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

Para Firefox Todavía uso la propiedad de escala CSS porque Firefox no admite la propiedad de zoom. Al mismo tiempo, Firefox escala bien el fondo SVG. See result.

Para IE9 He escrito javascript que modifica temporalmente la propiedad de ancho de CSS y luego de un pequeño retraso lo devuelve. De esta manera fuerzo a redibujar el fondo de CSS.

Answer 2

Estaba "jugando" con esto hace un tiempo y noté esto también en las fuentes. Aunque parece estar arreglado ahora (para las fuentes al menos).

Según entiendo el funcionamiento interno, los contenidos del elemento escalado se asignan a una textura, que a su vez se escala.

Como solución alternativa, intente utilizar una traducción 3d y mueva el elemento en el eje z para lograr el cambio de tamaño. Sin embargo, esto no cederá tanto control sobre el resultado final.

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