एसवीजी, टेक्स्ट, फिक्स्ड चौड़ाई/ऊंचाई

Question

के साथ फ़ॉन्ट, मैं एक एसवीजी 'टेक्स्ट' तत्व को एक svg 'rect' तत्व के अंदर फ़िट करने की कोशिश कर रहा हूं। जैसे नीचे दिए गए उदाहरण में, मैंने 100 वर्णों के फ़ॉन्ट आकार के साथ 5 वर्णों का एक मोनोस्पेस टेक्स्ट इस्तेमाल किया और मुझे टेक्स्ट के करीब एक बाध्य आयताकार होने की उम्मीद थी।

लेकिन पाठ के दाईं ओर एक खाली अंतर है।

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000"> 
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>  
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg> 

मैं 'टेक्स्ट' तत्व के लिए किस सीएसएस चयनकर्ताओं का उपयोग करना चाहिए?

नोट: मैं टेक्स्ट-ऑन-ए-पथ विधि का उपयोग नहीं करना चाहता हूं। एक निश्चित आकार के साथ बस एक फ़ॉन्ट।

धन्यवाद;

Answer 1

फ़ॉन्ट का आकार इसकी ऊंचाई निर्धारित करता है, इसकी चौड़ाई नहीं; और पात्र शायद ही कभी वर्ग हैं।

तो जहां तक ​​मुझे पता है, सीएसएस के माध्यम से भरोसेमंद मोनोस्पेस टेक्स्ट की चौड़ाई निर्धारित करने का कोई तरीका नहीं है।

ठीक है, CSS3 में ch unit है, जो 0 वर्ण की चौड़ाई है। यह मोनोस्पेस पाठ के लिए काम करेगा। लेकिन यह एसवीजी में समर्थित नहीं है।

आप निश्चित रूप से पिक्सेल में निश्चित चौड़ाई निर्धारित कर सकते हैं। 300 पिक्सेल की चौड़ाई मेरे लिए काम करती है। लेकिन फिर अगर कोई अन्य एक अलग मोनोस्पेस्ड फ़ॉन्ट का उपयोग करता है जो निश्चित चौड़ाई बंद हो सकती है। यदि आप <rect> पर भी font-family:monospace;font-size:100px; जोड़ते हैं, तो आप आयत की चौड़ाई em एस में सेट कर सकते हैं। लेकिन मुझे नहीं लगता कि यह और भी विश्वसनीय है।

हालांकि, आप स्क्रिप्टिंग का उपयोग कर सकते हैं। आप getComputedTextLength() का प्रयोग कर एक text element के पाठ की लंबाई प्राप्त करने के लिए कर सकते हैं:

<script type="text/javascript"> 
document.getElementById('rect').setAttribute(
    'width', 
    document.getElementById('text').getComputedTextLength() 
); 
</script> 

जोड़ा जा रहा है कि अपने एसवीजी के अंत में (और उचित तत्व आईडी जोड़ने) ओपेरा 10, Firefox 3.5 और सफारी 4.0 में काम करता है, कम से कम।

और जब आप इसमें हों, तो आप पाठ तत्व के बाध्यकारी बॉक्स को प्राप्त करने के लिए getBBox() का भी उपयोग कर सकते हैं ताकि आप फ़ॉन्ट आकार को मिलान करने का निर्णय लेते हुए भी आयत की ऊंचाई सेट कर सकें, यदि आप कभी भी फ़ॉन्ट बदलने का निर्णय लेते हैं आकार।