आईई 9

Question

में लंबवत रूप से एसवीजी पाठ को कैसे केंद्रित करें एसवीजी में लंबवत पाठ को संरेखित करने के लिए किसी को dominant-baseline विशेषता का उपयोग करना होगा। इस पर पहले से ही SO (Aligning text in SVG) पर चर्चा की गई है और यह the specification का हिस्सा है।

मेरी समस्या IE9 के साथ है जो स्पष्ट रूप से does not support dominant-baseline और other things का एक गुच्छा है।

क्या आपके पास IE9 में dominant-baseline: central का अनुमान लगाने के तरीके पर कोई विचार है?

यहां एक नमूना है जो एफएफ और क्रोम में काम करता है। यह आईई 9, ओपेरा 11. में काम नहीं करता है। विंडोज़ पर सफारी central का समर्थन नहीं करता है, लेकिन middle का समर्थन करता है जो अभी भी अच्छा है।

<?xml version="1.0"?> 
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;"> 
     XXX dominant-baseline: auto; XXX 
    </text> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;"> 
     XXX dominant-baseline: central XXX 
    </text> 
</svg> 

Answer 1

यह एक विशाल हैक है, लेकिन हम फ़ॉन्ट आकार को ध्यान में रखते हुए ऊर्ध्वाधर मध्य स्थिति का अनुमान लगा सकते हैं।

विनिर्देश को परिभाषित करता है central इस तरह:

केंद्रीय

यह एक गणना आधारभूत ईएम बॉक्स के केंद्र में है कि पहचान करता है।

हम ज्ञात फ़ॉन्ट आकार के EM box ले सकते हैं और केंद्र की गणना करने के लिए अपने बाध्यकारी बॉक्स को माप सकते हैं।

<?xml version="1.0"?> 
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text id="default-text" x="20" y="100" font-size="5em"> 
     M 
    </text> 
    <script> 
     window.onload = function() { 
      var text = document.getElementById("default-text"), 
       bbox = text.getBBox(), 
       actualHeight = (100 - bbox.y), 
       fontSize = parseInt(window.getComputedStyle(text)["fontSize"]), 
       offsetY = (actualHeight/2) - (bbox.height - fontSize); 

      text.setAttribute("transform", "translate(0, " + offsetY + ")"); 
     } 
    </script> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text id="reference-text" x="20" y="200" font-size="5em" 
      style="dominant-baseline: central;"> 
     M 
    </text> 
</svg> 

जाहिर है, कोड अधिक स्वच्छ हो सकता है, लेकिन यह सिर्फ एक-का-प्रमाण अवधारणा है।

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text> 

"डीवाई" विशेषता स्थापना पाठ नीचे परिवर्तन होगा (अगर मान ऋणात्मक है) या:

Answer 2

आपको लगता है कि यदि IE9 में काम करता है देखने के लिए आधारभूत-शिफ्ट की कोशिश कर सकते:

<?xml version="1.0"?> 
<svg width="300" height="500" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;"> 
     XXX dominant-baseline: auto; XXX 
    </text> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;"> 
     XXX dominant-baseline: central XXX 
    </text> 

    <path d="M 10 300 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="300" font-family="sans-serif" font-size="15"> 
     <tspan style="baseline-shift:-30%;"> 
     XXX baseline-shift: -30% XXX 
     </tspan> 
    </text> 
</svg> 

फ़ायरफ़ॉक्स आधारभूत-शिफ्ट समर्थन करने के लिए हालांकि नहीं लगता है, लेकिन वेबकिट और ओपेरा है।

Answer 3

एक तरह से IE में यह पूरा करने के फ़ॉन्ट का आकार से संबंधित स्थिति निर्धारित करने के लिए है (यदि मूल्य सकारात्मक है)। "टेक्स्ट-एंकर" विशेषता को सेट करना एक्स अक्ष पर पाठ को आईई में बस ठीक करता है। हालांकि यह हैकिश हो सकता है, लेकिन एसवीजी का आईई का समर्थन भी है!