2012-08-01 8 views
5

सफारी में अजीब समस्या उत्पन्न होती है। मैं एक एसवीजी होने के लिए तत्व की पृष्ठभूमि स्थापित कर रहा हूं। यह एसवीजी एक तंग पिक्सेल ग्रिड पर खींचा गया था और अधिकांश अन्य ब्राउज़र में पूरी तरह से दिखाई देता है, लेकिन कुछ कारणों से यह सफारी में गलत तरीके से स्केल कर रहा है।सफारी में एसवीजी स्केलिंग मुद्दे

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

... और सीएसएस कि बनाता है::

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

मैं पृष्ठभूमि आकार सेट करने की कोशिश की 99.9% के लिए

यहाँ एस.ए.एस.एस. मैं पृष्ठभूमि सेट करने के लिए उपयोग कर रहा हूँ है और इससे थोड़ा सा मदद मिली लेकिन हर ब्राउज़र में इसे धुंधला कर दिया। क्या हो रहा हो सकता है के रूप में

enter image description here

विचार:

यहाँ क्रोम और सफारी में परिणाम कर रहे हैं?

+0

यह संभवतः इस बग https://bugs.webkit.org/show_bug.cgi?id=82645 जो 'ब्रेक' एसवीजी के आंतरिक पहलू अनुपात के लिए इच्छुक नहीं वेबकिट से संबंधित लगता है से संबंधित हो सकता। क्या आपके आइकन में तत्व तत्व के समान पहलू अनुपात है? –

+0

हाय क्रिस। यह ठीक है। मैं इसे उसी आकार में प्रस्तुत कर रहा हूं जिस पर एसवीजी बनाया गया था। –

उत्तर

9

ठीक है, तो फिक्स एसवीजी तत्व में preserveAspectRatio="xMinYMin none" जोड़ने के लिए था।

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

ध्यान दें कि 'xMinYMin none' अमान्य वाक्यविन्यास है, http://stackoverflow.com/a/20563983/109374 देखें। –

संबंधित मुद्दे