कंटेनर फिट करने के लिए एसवीजी स्केलिंग टेक्स्ट

Question

यह एक बहुत ही सरल सवाल है, लेकिन मैं अपने कंटेनर को फिट करने के लिए एसवीजी में टेक्स्ट कैसे प्राप्त करूं?

मुझे कोई परवाह नहीं है कि यह बहुत लंबा या उच्च तक फैला हुआ दिखता है, लेकिन इसे अपने कंटेनर को फिट करने और जितना संभव हो उतना बड़ा होना चाहिए।

धन्यवाद

Answer 1

viewbox attribute तुम क्या जरूरत है।

Answer 2

यदि आपको वास्तव में परवाह नहीं है कि पाठ बदसूरत हो जाता है, तो यहां अज्ञात लंबाई टेक्स्ट को ज्ञात चौड़ाई में फिट करने का तरीका बताया गया है।

<svg width="436" height="180" 
    style="border:solid 6px" 
    xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text> 
    </g> 
</svg> 

Answer 3

हो सकता है कि यह आपके लिए काम कर सकता था। आपको मूल्यों को ट्विक करना होगा, लेकिन जब मूल div का आकार बदलता है तो यह आकार बदलता है। Here's my dabblet example. यह fittext.js को

मैं ‘viewBox’ & ‘preserveAspectRatio’ विशेषताओं का इस्तेमाल किया इसी तरह काम करता है।

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg> 
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg> 

अन्य संसाधनों मैं को देखा:

• Making Sense of SVG viewBox's Madness
• How to Style Scalable Vector Graphics Using CSS

Answer 4

यहाँ है कि मैं क्या साथ ... जो दूसरे लोग पोस्ट किया है करने के लिए अपने समान आए हैं, लेकिन मुझे लगता है कि यह अच्छी तरह से आकार बदलता है और स्केल करता है। यह कोड किसी भी पाठ में लगभग 10-25 वर्णों के बीच अंतर को जोड़ देगा ताकि इसे अपने माता-पिता की पूरी चौड़ाई भर सके। यदि आपको लंबा या छोटा टेक्स्ट चाहिए, तो बस दृश्य बॉक्स चौड़ाई और टेक्स्ट लम्बाई विशेषताओं को समायोजित करें।

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'> 
 
<text textLength='290' lengthAdjust="spacing" x='5' y="14" > 
 
    Some Unknown Text that is resizing 
 
</text> 
 
</svg>