Safari'de SVG ölçekleme sorunları

Safari'de garip bir sorun oluştu. Bir elemanın arka planını SVG olarak ayarlıyorum. Bu SVG sıkı bir piksel ızgarası üzerine çizildi ve çoğu diğer tarayıcıda mükemmel görünüyor, ancak bir nedenden dolayı Safari'de yanlış bir şekilde ölçekleniyor.Safari'de SVG ölçekleme sorunları

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

... ve yaratan CSS:

-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;

Ben% 99.9 background-boyutu ayarlama çalıştı İşte

Ben arka planı ayarlamak için kullanıyorum SUKDÖ'nün olduğunu ve biraz yardımcı oldu, ancak her tarayıcısında bulanıklaştırdı.

enter image description here

Fikirler neler olabileceğini olarak:

İşte Chrome ve Safari sonuçları nelerdir?

kaynak

2012-08-01 Brandon Durham

Bu muhtemelen 'ara' SVG'nin içsel boy oranına isteyen WebKit'in bağlı gözükmektedir bu hata https://bugs.webkit.org/show_bug.cgi?id=82645 ile ilişkili olabilir. İkonunuzda bulunan eleman ile aynı en boy oranı var mı? –

Merhaba Chris. Tam olarak öyle. Bunu, SVG'nin oluşturulduğu boyutta yapıyorum. –

Tamam, bu nedenle düzeltme, SVG öğesine preserveAspectRatio="xMinYMin none" eklemekti.

<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">

kaynak

2012-08-02 15:04:13

Not: xMinYMin none 'geçersiz sözdizimi, bkz http://stackoverflow.com/a/20563983/109374. –

Safari'de SVG ölçekleme sorunları

cevap

İlgili konular