यहाँ समस्या का एक चित्रण है (फ़ायरफ़ॉक्स और क्रोम में परीक्षण):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>नीले रंग redके divनीचे के अतिरिक्त स्थान पर ध्यान दें svg।
पहले से ही सेटिंग paddingऔर marginदोनों तत्वों की कोशिश की 0, लेकिन कोई भाग्य के साथ।
जवाबों:
आप की जरूरत है display: block;अपने पर svg।
<svg style="display: block;"></svg>
इसका कारण यह है कि इनलाइन-ब्लॉक एलिमेंट्स (जैसे <svg>और <img>) टेक्स्ट बेसलाइन पर बैठते हैं। आपके द्वारा देखा जा रहा अतिरिक्त स्थान वर्ण अवरोह ('y', 'g' आदि पर पूंछ को समायोजित करने के लिए छोड़ा गया स्थान) है।
vertical-align:topयदि आप इसे रखने की जरूरत है inlineया आप भी उपयोग कर सकते हैंinline-block
inline-blockतत्व (जैसे <svg>और <img>) पाठ आधार रेखा पर बैठते हैं। आपके द्वारा देखा जा रहा अतिरिक्त स्थान वर्ण अवरोह ('y', 'g' आदि पर पूंछ को समायोजित करने के लिए छोड़ा गया स्थान) है।
vertical-align:top
line-height, लेकिन line-height: 0svg और / या उसके कंटेनर पर सेटिंग करने से कोई फर्क नहीं पड़ा। केवल display: blockइसे हल किया। यदि आप एक बड़े एसवीजी पर काम कर रहे हैं तो यह एक ऐसा हो गया है क्योंकि आप इनलाइन के बारे में कभी नहीं सोचेंगे। यदि आपके पास थोड़ा आइकन है, हालांकि, यह समझ में आता है।
display: blockमेरे लिए काम नहीं किया, लेकिन vertical-alignकिया
svgएक inlineतत्व है। inlineतत्व सफेद-स्थान छोड़ते हैं।
उपाय:
जोड़े display:blockको svg, या माता-पिता के मेकअप ऊंचाई के रूप में ही div svg।
एक और विकल्प font-size: 0svg जनक में जोड़ा गया है।
एक पर जोड़ने और उपयोग height:100pxकरने का प्रयास करें :divheight="100%"svg
<div style="background-color:red;height:100px">
<svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
svgअग्रिम में ऊंचाई नहीं जानता है ।