एसवीजी tspan तत्व की चौड़ाई कैसे प्राप्त करें

मैं एसवीजी में tspan तत्व (text तत्व के अंदर स्थित) की रेंडर चौड़ाई प्राप्त करने का प्रयास कर रहा हूं। दिखने में है, जबकि मान 2 तैरता सही,एसवीजी tspan तत्व की चौड़ाई कैसे प्राप्त करें

<text> 
    <tspan>Value 1</tspan> 
    <tspan>Value 2</tspan> 
</text>

, मैं मान 1 छोड़ा फ्लोट करने के लिए चाहते हैं, ताकि एक से अधिक तत्वों जैसे संरेखित होगा:

यह मेरा मार्कअप है

Value 1                 Value 2 
Value 10                 Value 20 
Value 100                Value 200 
Value 1000                Value 2000

के बाद से मुझे tpsan ("मान 1"/"मान 2") की चौड़ाई चाहिए और पाठ तत्व नहीं, मैं getBBox() का उपयोग नहीं कर सकता, क्योंकि यह विधि tspan तत्वों पर लागू नहीं होती है।

विचित्र रूप से पर्याप्त है, jQuery की width() विधि का उपयोग क्रोम में सही मान वापस कर देगा, लेकिन फ़ायरफ़ॉक्स में NaN लौटाता है। किसी भी सुझाव की सराहना की जाएगी।

स्रोत

2011-03-19 RussellUresti

शायद कंसोल और कोर फ़ंक्शन के लिए कोर फ़ंक्शन पर एक नज़र डालने से स्पष्टीकरण मिलेगा? – mattsven

ऐसा लगता है कि jQuery सिर्फ ऑफ़सेट विदथ का उपयोग करता है - मैंने ऑफसेट के मूल्यों को सुलझाने की कोशिश की, क्रोम मुझे मूल्य देता है, फ़ायरफ़ॉक्स मुझे 'अपरिभाषित' देता है। – RussellUresti

tspan के स्क्रीन-स्पेस बाउंडिंग बॉक्स को खोजने के लिए आप getBoundingClientRect() का उपयोग कर सकते हैं। मैंने सफारी v5.0.4, फ़ायरफ़ॉक्स 3.6 और 4.0 आरसी, और ओपेरा 11 में काम करने के लिए इसका परीक्षण किया है और पाया है। हालांकि, यह fails with Chrome, v10.0.648.151 और v11.0.696.14 है। (यह 0 पर सेट किए गए सभी मानों के साथ क्लाइंट्रैक्ट देता है।)

आपको इस क्लाउड-स्पेस आयत को एसवीजी समन्वय में स्क्रीन ट्रांसफॉर्म मैट्रिक्स के उलटा करके गुणा करके बदलना होगा। यहाँ एक काम कर उदाहरण है:
http://phrogz.net/SVG/tspan_bounding_box.xhtml

offsetWidth के साथ युग्मित यह (जो क्रोम और सफारी, लेकिन नहीं Firefox या ओपेरा में काम करता है) और आप एक समाधान है कि सभी ब्राउज़रों कि एसवीजी में अच्छी तरह से समर्थन में काम करना चाहिए है।

स्रोत

2011-03-21 02:44:54 Phrogz

यह निश्चित रूप से काम करता प्रतीत होता है, हालांकि यह ऑफ़सेट विड्थ की तुलना में सटीक (या शायद यह अधिक सटीक) प्रतीत नहीं होता है। यहां वास्तविक दुनिया का उदाहरण दिया गया है कि मैं इसका उपयोग कैसे कर रहा हूं: http://jsfiddle.net/ArmRM/6411/ मैंने matrixTransform मानों का उपयोग नहीं किया, क्योंकि फ़ायरफ़ॉक्स ने .width और .height विशेषताएँ प्रदान की हैं - क्या ये समर्थित नहीं हैं ओपेरा/सफारी में? – RussellUresti

त्रुटियों के बिना संस्करण: http://jsfiddle.net/ArmRM/6412/ (RegEx निकाला) – RussellUresti

मेरे पास अभी तक आपका उदाहरण कोड देखने का समय नहीं है, लेकिन मुझे लगता है कि 'ऑफ़सेट विड्थ' निर्दिष्ट किया जा सकता है स्क्रीन इकाइयों में जबकि आपको स्क्रीन स्पेस से एसवीजी स्पेस, या आगे रूपांतरण मानों में इकाइयों को बदलने की आवश्यकता होती है। – Phrogz

एकाधिक समाधानों को आजमाने के बाद मुझे getComputedTextLength एक svg tspan की चौड़ाई प्राप्त करने का सबसे सटीक तरीका माना गया। यह भी विभिन्न ब्राउज़र पर एक ही तरह से समर्थित है और व्यवहार करता है। मैंने यह भी पाया कि tspan की ऊंचाई प्राप्त करने का सबसे अच्छा तरीका फ़ॉन्ट-आकार विशेषता को पढ़ने के लिए है।

स्रोत

2013-09-10 21:53:12 madmed

नोट: यह वास्तविक वर्णों की चौड़ाई है, न कि tspans के बाध्यकारी बॉक्स। फ़ॉन्ट वर्ण tspan बाउंडिंग बॉक्स से थोड़ा बड़ा हो सकता है। – Axel

धन्यवाद! काफी सहायक –

एसवीजी tspan तत्व की चौड़ाई कैसे प्राप्त करें

उत्तर

संबंधित मुद्दे