IT-Swarm.Net

IE9-10 में एसवीजी के साथ पृष्ठभूमि के आकार को पूरा किया गया

मेरे पास पृष्ठभूमि छवि के साथ एक div सेट है:

<div>Play Video</div>

निम्नलिखित सीएसएस के साथ:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

पृष्ठभूमि का आकार फ़ायरफ़ॉक्स, सफारी और क्रोम में सम्मानित किया गया है। IE8 में, SVG को PNG फ़ाइल से बदल दिया जाता है। हालाँकि, IE9 और IE10 में, एसवीजी फ़ाइल काफी नीचे आकार है। समस्या div की चौड़ाई और ऊंचाई से जुड़ी हुई लगती है। यदि मैं 150px की ऊंचाई जोड़ता हूं, तो एसवीजी ठीक से प्रस्तुत किया जाता है। अगर मैं इसे छोटा करता हूं (यानी 100px) तो ग्राफिक सिकुड़ने लगता है।.

क्या किसी ने एक्सप्लोरर में इस मुद्दे को ठीक करने का एक तरीका पाया है? वहाँ एक तरीका है बताने के लिए IE की चौड़ाई और ऊंचाई के स्वतंत्र रूप से पृष्ठभूमि के आकार का उपयोग करने के लिए?

72
Julesfrog

सुनिश्चित करें कि आपके SVG में width और height निर्दिष्ट है। यदि आप इसे इलस्ट्रेटर से उत्पन्न कर रहे हैं, तो सुनिश्चित करें कि "उत्तरदायी" बॉक्स अनियंत्रित है क्योंकि यह विकल्प चौड़ाई और ऊंचाई को हटा देता है।.

157
mbxtr

एसवीजी में mbxtr के रूप में चौड़ाई और ऊँचाई जोड़ना लगभग मेरे लिए काम करता है। IE में जिम्मेदारी से काम करने के लिए मुझे preserveAspectRatio="none slice" जोड़ने की आवश्यकता है।.

11
Simeon Rowsell

मेरे लिए इन 3 सुधारों ने मदद की:

  • यदि संभव हो तो पृष्ठभूमि-स्थिति "केंद्र" पर सेट करें
  • पृष्ठभूमि-आकार दोनों मानों के लिए, "100% ऑटो" चाल नहीं चलेगा, इसलिए "100% 100%" का उपयोग करें
  • यदि वह अभी भी एसवीजी के "व्यूबॉक्स" मूल्यों को अंतिम रूप से बदलने में मदद नहीं करता है और यह एक पिक्सेल को चौड़ाई और एसवीजी की ऊंचाई की तुलना में व्यापक और उच्च बनाता है। यह SVG को थोड़ा सिकोड़ता है, लेकिन IE इसे काट देता है - और छोटे आकार पर ध्यान नहीं दिया जाएगा।.
4
Christian Krammer

खैर, ऐसा नहीं लगता कि कोई समाधान है। अचंभा अचंभा। यह सब के बाद IE है। मैंने निम्नलिखित कोड का उपयोग करके समाप्त किया:

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

मुझे क्लीनर संस्करण बेहतर लगा, लेकिन यह हैक सभी आधुनिक ब्राउज़रों में काम करता है, जिसमें IE8, 9, और 10 (शायद 11 लेकिन मैंने परीक्षण नहीं किया)।.

3
Julesfrog

मेरे पास यह मुद्दा था और मैंने पाया कि svg BUT के लिए कोड के अंदर ऊँचाई और चौड़ाई को हटाने से व्यू बॉक्स को सुलझाया जा सकता है।.

मैं एक संकलक साइट का उपयोग करने की सलाह देता हूं जैसे: https://jakearchibald.github.io/svgomg/ और विकल्प सेट करना "ऊंचाई और चौड़ाई पर व्यूबॉक्स पसंद करें"

भी अगर इस काम में से कोई नहीं, इलस्ट्रेटर में svg छवि के चारों ओर एक चौकोर पृष्ठभूमि लगाने की कोशिश करें लेकिन किनारों के आसपास पर्याप्त पैडिंग छोड़ दें।.

और अपनी स्टाइल्सशीट में svg का आयात करें -> डेटा uri: ... उदाहरण:

पृष्ठभूमि-चित्र: data-uri ('image/svg + xml; charset = UTF-8', 'जहां/आपका/svg/is/स्थित');

2
Harry Joao

1. जावास्क्रिप्ट

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }

  1. svg (मूल ऊंचाई = 1050) खुद को सीधे जोड़ें svg फ़ाइल preserveAspectRatio = "कोई नहीं" ऊंचाई = "2150"
0
Maksimov Maksim

हमारे पास एसवीजी पृष्ठभूमि की छवियों के साथ एक समान मुद्दा था जो एक तत्व के पूर्ण साइट नहीं थे (जैसे कि खोज इनपुट के बाईं ओर आवर्धक कांच)।.

हमने इलस्ट्रेटर सीसी में एसवीजी का निर्माण किया, लेकिन पीटर कोलिंग्रिज के एसवीजी ऑप्टिमाइज़र के माध्यम से उन्हें चलाकर सभी अनावश्यक क्रॉफ्ट को बाहर निकालने का प्रयास किया। http://petercollingridge.appspot.com/svg-optimiser

0
Chaffron

Svg बैकग्राउंड इमेज का साइज IE और क्रोम इन प्रॉपर्टीज के इस्तेमाल पर समान होगा

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
0
Super Model

मैंने @ mbxtr के समाधान की कोशिश की

सुनिश्चित करें कि आपके एसवीजी की चौड़ाई और ऊंचाई निर्दिष्ट है। यदि आप इसे इलस्ट्रेटर से उत्पन्न कर रहे हैं, तो सुनिश्चित करें कि "उत्तरदायी" बॉक्स अनियंत्रित है क्योंकि यह विकल्प चौड़ाई और ऊंचाई को हटा देता है।.

अभी भी विंडोज़ क्रोम और IE पर मेरे लिए काम नहीं किया। मैं एक फ़ॉन्ट आइकन निर्यात कर रहा था, इसलिए यदि आपके पास एक फ़ॉन्ट है, तो सुनिश्चित करें कि आप इसे इस रूप में निर्यात करते हैं:

  • "फ़ॉन्ट: रूपरेखा में बदलें"
  • और "उत्तरदायी" गलत है

मैं भी अनियंत्रित "minify" बस के मामले में ...

0
Beatriz Gonzalez