एसवीजी व्यूबॉक्स और चौड़ाई IE के साथ सही ढंग से स्केलिंग नहीं कर रहा है

Question

मैं व्यूबॉक्स गुणों के साथ इनलाइन एसवीजी बनाने की कोशिश कर रहा हूं, लेकिन कोई स्पष्ट चौड़ाई या ऊंचाई विशेषताओं नहीं है। मैं सीएसएस का उपयोग कर एसवीजी की चौड़ाई 100% पर सेट कर रहा हूं। इसे एसवीजी स्केल को अपने रैपिंग कंटेनर में रखना चाहिए, जो व्यूबॉक्स द्वारा स्थापित पहलू अनुपात को बनाए रखता है। क्रोम और फ़ायरफ़ॉक्स में, यह पूरी तरह से काम करता है!

यहाँ मैं किस बारे में बात कर रहा हूँ का एक न्यूनतम codepen उदाहरण है: http://codepen.io/pcorey/pen/amkGl

HTML:

<div> 
    <svg viewBox="0 0 100 10"> 
    <text x="1" y="9">hello</text> 
    </svg> 
</div> 

सीएसएस:

div { 
    width: 400px; 
} 

svg { 
    width: 100%; 
    max-height: 100%; 
    outline: 1px solid tomato; 
} 

text { 
    font-size: 10px; 
} 

viewBox 100x10 है। बाहरी div 400px चौड़ाई निर्धारित करने के लिए सेट है। इसका मतलब है कि एसवीजी की ऊंचाई 40px (और क्रोम/फ़ायरफ़ॉक्स में है) होना चाहिए। लेकिन, आईई 11 में, चौड़ाई हमेशा 150 पीएक्स होती है (भले ही div की चौड़ाई 1500px से अधिक हो ...)

क्या आईई में इसे ठीक करने का कोई अच्छा तरीका है? आईई अज्ञात ऊंचाई को सही तरीके से क्यों नहीं संभाल सकता है? मैं "intrinsic aspect ratio" चाल का उपयोग कर सकता हूं, लेकिन यह बहुत बदसूरत है, एक और डीओएम तत्व की आवश्यकता है, और यह आवश्यक है कि जब भी रैपर आकार बदलता है तो मैं पैडिंग-टॉप को दोबारा बदलता हूं।

कारण है कि मैं ऐसा करना चाहते हैं के बारे में अधिक जानकारी के लिए, मैं इसके बारे में त्वरित ब्लॉग पोस्ट ने लिखा है: http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

मदद के लिए धन्यवाद!

Answer 1

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

इसका समाधान है, आप पैडिंग-डाउन पर सही ऊंचाई की गणना और रख सकते हैं और इससे आपको "अज्ञात ऊंचाई" सही मिल जाएगी। http://codepen.io/tomkarachristos/pen/GZPbgZ

<!-- 
xMidYMin: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. 
slice : the entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible, 
height: if you dont set >= 1px some browsers will not render anything. 
--> 
<div> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible; 
     /*without js:padding-bottom:55%*/"><text>hello</text> 
    </svg> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible;"><text>Age</text> 
    </svg> 
</div> 

और जावास्क्रिप्ट: आप एक पूर्ण समाधान यहाँ देख सकते हैं

/* 
Here we do the hack. 
With the math type: percent * height/width 
we are adjust the total height of an element who is depend in width using the padding-bottom. 
You can put an inline padding-bottom if you want in html. 
*/ 

$(function() { 
    $('svg').each(function() { 
    var svg = $(this); 
    var text = svg.find('text'); 
    var bbox = text.get(0).getBBox(); 
    //the hack 
    var calcString = "calc(100% * " + bbox.height/bbox.width + ")"; 
    svg.css("padding-bottom",calcString); 

    svg.get(0).setAttribute('viewBox', 
          [bbox.x, 
          bbox.y, 
          bbox.width, 
          bbox.height].join(' ')); 
    }); 
}); 

Answer 2

एक वैकल्पिक हल है कि सभी ब्राउज़रों में काम करना चाहिए कंटेनर अपने एसवीजी अंदर बैठता है करने के लिए एक खाली चित्र जोड़ना है, जो अपने एसवीजी रूप में एक ही आयाम हैं:

.wrap { 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.viz { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="wrap"> 
 
    <img src="img/blank.png" /> 
 
    <div class="viz"> 
 
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>    
 
    </div> 
 
</div>

इस मामले में, आपकी छवि में 600px द्वारा 1000px के प्राकृतिक आयाम होना चाहिए और पारदर्शी होना चाहिए (या अपने .wrap कंटेनर की पृष्ठभूमि से मेल खाना)। यह कंटेनर के आकार के लिए उपयुक्त होगा svg अंदर बैठता है। .viz तत्व की पूर्ण स्थिति इसे छवि के शीर्ष पर बैठने की अनुमति देगी, इसकी ऊंचाई का उपयोग करके, कुछ भी कट ऑफ नहीं हो जाता है।