एसवीजी से "पैडिंग" निकाल रहा है?

Question

मैं एक एसवीजी ग्राफिक कि एक वृत्त खींचता है। जब मैंने इसे एक background-color सीएसएस के साथ देते हैं, मैं इसे केवल कोनों में दिखाने के लिए, क्योंकि सीएसएस तत्वों दौर कभी नहीं कर रहे हैं उम्मीद (हा हा border-radius ...) - तो मैं के साथ एक आयताकार बॉक्स में एक पारदर्शी पृष्ठभूमि के साथ एक दौर ग्राफिक डाल पीछे का रंग।
लेकिन इसके बजाय, यह इस तरह दिखता है:

वहाँ किसी भी तरह से मैं चला & दाईं तरफ "गद्दी" को दूर कर सकता है? क्या ViewBox के साथ ऐसा कुछ है?

Answer 1

यदि आप एसवीजी को पूरे बॉक्स में खींचना चाहते हैं, तो रूट <svg> तत्व पर preserveAspectRatio="none" डालें।

Answer 2

दो संभावनाएं है कि इस का कारण बन सकता है, तो अपनी एसवीजी तैयार किया गया है के आधार पर नहीं है।

1.) एसवीजी में आपका पथ/सर्कल बाईं ओर से गठबंधन नहीं होने वाले स्थान पर शुरू हो सकता है।

बिंदु 0,0 से एक ग्रिड की तरह यह कल्पना कीजिए और यह 64 की चौड़ाई और 32 की ऊंचाई है, और आप चक्र बता दिया है 32,16 पर और 16. इस इच्छा के एक त्रिज्या के साथ केंद्र के लिए सर्कल के हर 32 अंक तक बाएं और दाएं हाथ की ओर पैडिंग के 16 अंक छोड़ दें।

<p>No padding with coordinate</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg> 
 
<p>Example above but starting at a coordinate that causes whitespace</p> 
 
<svg style="border: 1px solid red;" 
 
     viewBox="0 0 64 32" 
 
     height="50px" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="32" cy="16" r="16"/> 
 
</svg>

इस दूर करने के लिए जिस तरह से अपने पथ का स्थान, या तो यह है कि यह एक अलग समन्वय पर शुरू होता है अपने viewbox बदलने की कोशिश करने के लिए है। अपने ViewBox के निर्देशांक बदलने का एक आदर्श के रूप में यह ठीक से शुरू करने के लिए विसंगत हो जाता है नहीं है एक बाहर गैर zero'd समन्वय और आप जब viewbox के लिए किसी भी अधिक आकार जोड़ने खाते में इस में लेने के लिए याद करना होगा।

<p>Changing the viewbox to start at a different coordinate</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="50 50 100 100" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="100" cy="100" r="50"/> 
 
</svg> 
 
<p>Changing the 'path' so that it doesn't leave padding</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="0 0 100 100" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="50" cy="50" r="50"/> 
 
</svg>

2.) आपका एसवीजी समान रूप से पैमाने पर करने को कहा गया है।

यह दूसरा विकल्प यह होगा कि आपके एसवीजी में खींचे गए सभी पथ एसवीजी स्केल होने पर उनके आयाम आयामों पर समान अनुपात बनाए रखेंगे।

कल्पना कीजिए कि आप एक चक्र है, और इतना है कि यह बड़े करीने से कोई पैडिंग के साथ बच्चों फिट होगा अपने एसवीजी डिजाइन किया गया है। अब हमने एक्स अक्ष में 2 * और वाई अक्ष में 1.5 * द्वारा इस एसवीजी बॉक्स को स्केल किया है, सर्कल एक्स दिशा में 2 * कोशिश करेगा और बढ़ेगा, लेकिन क्योंकि इसे अपने अनुपात रखना है और यह बढ़ नहीं सकता है 2 * वाई में, यह केवल प्रत्येक दिशा में 1.5 * से बढ़ेगा। एक्स दिशा में बाएं ओवर .5 * के लिए यह केवल सफेद जगह जोड़ देगा।

<p>Unscaled</p> 
 
<svg style="border: 1px solid red" 
 
     height="100px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg> 
 
<p>Above circle scaled at an uneven ratio</p> 
 
<svg style="border: 1px solid red" 
 
     height="50px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg>

@heycam ऊपर कहा गया है, यह बदलने के लिए आप इस अनुपात स्केलिंग के लिए बंद कर दिया अनुमति देने के लिए एसवीजी तत्व सेट कर सकते हैं के रूप में। यह "preserveAspectRatio" विशेषता का उपयोग करके और इसे "none" पर सेट करके किया जाता है।

<svg style="border: 1px solid red" 
 
     height="50px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     preserveAspectRatio="none" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg>

उम्मीद है कि इस SVGs की अपनी समझ से कुछ मदद करता है, के रूप में वे एक बहुत उपयोगी उपकरण हो!