एसवीजी में पाठ तत्व का ऊर्ध्वाधर संरेखण

142

मान लें कि मेरे पास SVG फाइल है:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

मैं किसी भी तरह के शीर्ष संरेखित करना चाहते हैं aऔर b। वास्तव में, मैं चाहता हूं कि मेरी स्थिति rooflineइसके बजाय हो baseline!

svg vertical-alignment w3c

— SeMeKh
स्रोत

आईई में काम करने वाला एकमात्र उत्तर: stackoverflow.com/a/29089222/9069356

— डोमिनस।विबिसुम

116

alignment-baselineसंपत्ति क्या आप इसे निम्न मान ले जा सकते हैं के लिए देख रहे है

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

W3c से विवरण

यह गुण निर्दिष्ट करता है कि किसी वस्तु को उसके माता-पिता के सम्मान के साथ कैसे संरेखित किया जाता है। यह गुण निर्दिष्ट करता है कि इस तत्व की कौन सी आधार रेखा माता-पिता की संगत आधार रेखा के साथ संरेखित की जानी है। उदाहरण के लिए, यह रोमन पाठ में वर्णक्रमीय आधार रेखाओं को फ़ॉन्ट आकार परिवर्तन में संरेखित करने की अनुमति देता है। यह आधार-रेखा के साथ उसी नाम से डिफॉल्ट करता है जैसे कि संरेखण-बेसलाइन संपत्ति के गणना मूल्य। अर्थात्, ब्लॉक-प्रोग्रेस-दिशा में "विचारधारा" संरेखण-बिंदु की स्थिति संरेखित की जा रही वस्तु के आधार रेखा-तालिका में "वैचारिक" आधार रेखा की स्थिति है।

W3C स्रोत

दुर्भाग्य से, हालाँकि यह प्राप्त करने का "सही" तरीका है कि आप फ़ायरफ़ॉक्स के प्रकट होने के बाद एसवीजी टेक्स्ट मॉड्यूल ( 'एसवीजी इन फ़ायरफ़ॉक्स' एमडीएन डॉक्यूमेंटेशन ) के लिए प्रस्तुति विशेषताओं को लागू नहीं कर सकते हैं।

— साइमन वेस्ट
स्रोत

उसके साथ किस्मत नहीं थी। क्या आप एक उदाहरण प्रदान कर सकते हैं?

— SeMeKh

2

मेरी राय में सबसे अच्छा उत्तर, जैसा कि इसने मेरा जवाब दिया कि बिना दीवार के पाठ पृष्ठ पर नेविगेट करने के लिए। मैं अपना पाठ y = 0 पर प्रदर्शित करना चाहता था, लेकिन यह ऑफ स्क्रीन था, इसलिए मैंने एक सीएसएस नियम का उपयोग किया "संरेखण- आधार रेखा: फांसी ", और यह वही था जो मैं तलाश कर रहा था, एसवीजी कंटेनर में उच्चतम बिंदु पर पाठ, एक भी पिक्सेल ऑफ़स्क्रीन के बिना।

— आर। हिल

1

@SeMeKh: Hmm संयोग से, इसने मेरे लिए क्रोमियम पर काम किया, लेकिन अब मैंने सिर्फ यह सत्यापित किया है कि फ़ायरफ़ॉक्स पर समान काम नहीं करता है। ऐसा प्रतीत होता है कि यह संपत्ति अब तक ब्राउज़रों में लगातार समर्थित नहीं है।

— आर। हिल।

2

@ R.Hill यहाँ फ़ायरफ़ॉक्स के लिए बग्रेपोर्ट है जो 11 साल पहले खोला गया था Bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: 'मध्य' और 'मध्य' में क्या अंतर है?

— mxmlnkn 13

9

गलती से अपवित्र, और क्योंकि मैंने पहले भी वही गलती की है, मैं इसे पूर्ववत नहीं कर सकता। ☹ alignment-baseline: centralकरता नहीं फ़ायर्फ़ॉक्स में SVGs के लिए काम करते हैं, और है कि डिजाइन द्वारा हो रहा है। dominant-baseline: centralमेरे द्वारा अब तक की कोशिश किए गए प्रत्येक ब्राउज़र में काम करता है, जैसा कि इस उत्तर में संकेत दिया गया है: stackoverflow.com/a/15997503/1450294

— माइकल स्हीपर

227

एसवीजी कल्पना के अनुसार, alignment-baselineकेवल लागू होता है <tspan>, <textPath>, <tref>और <altGlyph>। मेरी समझ यह है कि इसका उपयोग उन से <text>ऊपर की वस्तु को ऑफसेट करने के लिए किया जाता है । मुझे लगता है कि आप जो खोज रहे हैं वह है dominant-baseline।

के संभावित मान dominant-baselineहैं:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

प्रत्येक संभावित मूल्य के बारे में अधिक जानकारी के लिए प्रमुख-आधारभूत संपत्ति के लिए W3C अनुशंसा की जाँच करें ।

— toutankh
स्रोत

8

इसने फ़ायरफ़ॉक्स के साथ मेरी समस्याओं को ठीक कर दिया (जो "एलाइनमेंट-बेसलाइन" प्रॉपर्टी के साथ काम नहीं कर रहा था)। "प्रमुख-आधार रेखा" क्रोम और फ़ायरफ़ॉक्स पर काम करता है। धन्यवाद!

— मैरियानो देसनज़े

5

सिवाय इसके कि यह इस बिंदु पर IE के किसी भी संस्करण में काम नहीं करता है, इसलिए यह वास्तव में कई वास्तविक दुनिया के अनुप्रयोगों के लिए उपयोगी नहीं है, दुर्भाग्य से।

— योना एप्लेट्री

3

चूंकि IE प्रमुख-बेसलाइन, या एलाइनमेंट-बेसलाइन का समर्थन नहीं करता है, आप इस तरह की सुविधा के लिए समर्थन की जांच कर सकते हैं element.hasAttribute('dominant-baseline'), और यदि यह dy=-0.4emइस उत्तर में उल्लिखित के रूप में गलत आवेदन देता है तो stackoverflow.com/a/29089222/2296470

— तिगरान

1

प्रमुख-आधार रेखा: केंद्रीय ने मेरे मामले में काम किया। धन्यवाद!

— लियाम मिशेल

1

ध्यान रखें कि प्रमुख-बेसलाइन IE10-12 और Edge16 द्वारा समर्थित नहीं है

— japrescott

47

अटर ("प्रमुख-आधार रेखा", "केंद्रीय")

— user1087079
स्रोत

1

यह चरित्र के केंद्र द्वारा संरेखित करता है (जितना कि फ़ॉन्ट ग्लिफ़ अच्छी तरह से खेलते हैं), यह सुनिश्चित नहीं है कि यह इस प्रश्न का उत्तर कैसे है।

— 13

3

यह d3 या jquery के गुण निर्दिष्ट करने की विधि है

— ग्लिफ़

1

यह समाधान पाठ के ऊर्ध्वाधर केंद्र में आधार रेखा डालता है। तो y समन्वय ऊर्ध्वाधर केंद्र में है। यह वह उत्तर था जिसकी मुझे तलाश थी। धन्यवाद।

— हेनरी

1

उत्तर का मूल सही है - केंद्रीय के लिए प्रमुख-आधारभूत विशेषता सेट करें, हालांकि attr () एक देशी जेएस फ़ंक्शन नहीं है और इसमें कोई स्पष्टीकरण नहीं है।

— jave.web

30

यदि आप IE में इसका परीक्षण कर रहे हैं, तो प्रमुख-आधार रेखा और संरेखण-आधार रेखा समर्थित नहीं हैं।

IE में पाठ को केंद्रित करने का सबसे प्रभावी तरीका "डाई" के साथ कुछ इस तरह का उपयोग करना है:

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

ऋणात्मक मान इसे ऊपर ले जाएगा और डाई का एक सकारात्मक मूल्य इसे नीचे स्थानांतरित कर देगा। मैंने पाया है -4em का उपयोग मुझे लगता है कि थोड़ा अधिक केन्द्रित है -5em की तुलना में, लेकिन आप उस के न्यायाधीश होंगे।

— whyoz
स्रोत

5

आईई में काम करने वाले एकमात्र उत्तर के लिए धन्यवाद। यह शर्म की बात है कि हमें ऐसा करना पड़ता है, लेकिन अन्य जवाबों ने मुझे क्रोम / एफएफ में काम करने में समय की एक महत्वपूर्ण राशि बर्बाद कर दी, फिर पाया कि यह ब्राउज़र परीक्षण के दौरान IE में काम नहीं करता है।

— योना एप्लेट्री

अच्छा और सरल निर्णय! और हमें ब्राउज़रों में पाठ की स्थिति पर इसके प्रभाव को छोड़ने के लिए "संरेखण-आधार रेखा" विशेषता को हटाने के लिए याद रखना चाहिए जो इसका समर्थन करते हैं।

— यतारस

7

एसवीजी सिफारिश को देखने के बाद मुझे समझ में आया है कि आधारभूत गुण अन्य पाठ के सापेक्ष पाठ की स्थिति के लिए हैं, खासकर जब विभिन्न फ़ॉन्ट और भाषाओं को मिलाते हुए। यदि आप पाठ पोस्ट करना चाहते हैं ताकि यह सबसे ऊपर हो yतो आपको उपयोग की आवश्यकता है dy = "y + the height of your text"।

— rjax
स्रोत

कल्पना करने के लिए लिंक की सराहना करते हैं, कुछ वास्तव में उपयोगी वहाँ पढ़ने। "<list-of-lengths>"उदाहरण के लिए (जुड़ा हुआ) विकल्प के बारे में पता नहीं था ( प्रति चरित्र हेरफेर की अनुमति देता है)

— ब्रिचिन