एचटीएमएल 5 एसवीजी - टेक्स्ट पोजिशनिंग

Question

मैं इसे शीर्ष मार्जिन देकर एचटीएमएल 5 एसवीजी में <text> तत्व स्थापित करने की कोशिश कर रहा हूं। मान लीजिए, मैं 1012x का शीर्ष मार्जिन रखने के लिए <text> तत्व चाहता था। यह काम नहीं करेगा:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

समस्या है, कि एसवीजी पाठ तत्वों के लिए, y दूरी पाठ, नहीं ऊपर से नीचे की रेखा से मापा जाता है। यह कोड टेक्स्ट बनाता है जहां केवल निम्न 10px दिखाई दे रहे हैं। तो, हम मार्जिन सही पाने के लिए y मूल्य के लिए font-size मूल्य जोड़ने के लिए:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

कम से कम, कि मैं क्या सोचा था। लेकिन यह या तो काम नहीं करता है। अब, शीर्ष मार्जिन बहुत बड़ा है, जैसा कि आप पहेली में देख सकते हैं: http://jsfiddle.net/yy8gS/2/। मैं चाहता हूं कि शीर्ष मार्जिन बाएं मार्जिन जैसा ही हो, जो स्पष्ट रूप से मामला नहीं है। वास्तव में, y 48 का मूल्य सही दिखता है लेकिन मुझे नहीं पता कि क्यों, या मैं मनमाना मार्जिन और फ़ॉन्ट आकार के लिए इस मान की गणना कैसे कर सकता हूं। मुझे लगता है कि font-size मान स्थिति के लिए एसवीजी द्वारा उपयोग किए जाने वाले वास्तविक टेक्स्ट ऊंचाई मान नहीं है।

क्या कोई इस से मेरी सहायता कर सकता है? क्या मैं एसवीजी के साथ भी संभव करने की कोशिश कर रहा हूं?

अग्रिम धन्यवाद!

Answer 1

dominant-baseline सेट करने से आपको dominant-baseline="hanging" की आवश्यकता होनी चाहिए ताकि टेक्स्ट स्थिति बेसलाइन की बजाय टेक्स्ट के शीर्ष पर आधारित हो।

यदि आप जानना चाहते हैं कि फ़ॉन्ट कितना लंबा है तो आपको यह निर्धारित करने के लिए getExtentOfChar पर कॉल करना चाहिए, यह मानने के बजाय कि आपको फ़ॉन्ट आकार के साथ एक फ़ॉन्ट प्राप्त करने के बजाय यह वही है जो आपने पूछा था।

Answer 2

आप emy और dy-सामग्री में भी उपयोग कर सकते हैं!

यह कम से कम मेरी समस्या हल:

<div> 
 
    <p>working: margin as y-value:</p> 
 
    <svg style="height: 100px; border: 1px solid black"> 
 
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial"> 
 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
 
    </text>  
 
    </svg> 
 
</div>