Problemas de escala SVG en Safari

Problema extraño que se produce en Safari. Estoy estableciendo el fondo de un elemento para ser un SVG. Este SVG se dibujó en una cuadrícula de píxeles ajustada y aparece en la mayoría de los otros navegadores a la perfección, pero por alguna razón está escalando incorrectamente en Safari.Problemas de escala SVG en Safari

Aquí es el SASS que estoy usando para configurar el fondo:

@include background-size(100% 100%); 
background: transparent image-url('icon-laptop.svg') no-repeat 0 0;

... y el CSS que asegura:

-webkit-background-size: 100% 100%; 
-moz-background-size: 100% 100%; 
-o-background-size: 100% 100%; 
background-size: 100% 100%; 
background: transparent url('../images/icon-laptop.svg?1343856741') no-repeat 0 0;

Intenté fijar el fondo de tamaño a 99,9% y ayudó un poco, pero lo hizo borroso en cada navegador.

Estos son los resultados en Chrome y Safari:

enter image description here

ideas sobre lo que podría estar sucediendo?

Fuente

2012-08-01 Brandon Durham

que posiblemente puede estar relacionado con este error https://bugs.webkit.org/show_bug.cgi?id=82645 que parece estar relacionado con WebKit no querer 'break' la relación de aspecto intrínseca del SVG. ¿Su icono tiene la misma relación de aspecto que el elemento que lo contiene? –

Hola Chris. Lo hace, exactamente. Lo estoy renderizando al mismo tamaño en que se creó el SVG. –

Bien, entonces la solución era agregar preserveAspectRatio="xMinYMin none" al elemento SVG.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="35px" height="28px" viewBox="0 0 35 28" enable-background="new 0 0 35 28" xml:space="preserve" preserveAspectRatio="xMinYMin none">

Fuente

2012-08-02 15:04:13

Tenga en cuenta que 'xMinYMin none' es una sintaxis no válida, consulte http://stackoverflow.com/a/20563983/109374. –

Respuesta

Cuestiones relacionadas