text - एसवीजी आयत में टेक्स्ट कैसे रखें और केंद्र कैसे करें




svg (5)

आप सीधे text-anchor = "middle" संपत्ति का उपयोग कर सकते हैं। मैं आपके आयताकार और पाठ पर एक रैपर svg तत्व बनाने की सलाह देता हूं। इस तरह आप एक सीएसएस चयनकर्ता का उपयोग कर पूरे तत्व का उपयोग कर सकते हैं। सुनिश्चित करें कि आप टेक्स्ट की 'x' और 'y' प्रॉपर्टी को 50% के रूप में रखें।

<svg class="svg-rect" width="50" height="40">
        <rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
        <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
    </svg>

मेरे पास निम्नलिखित आयताकार है ...

<rect x="0px" y="0px" width="60px" height="20px"/>

मैं इसके अंदर "फिक्शन" शब्द को केंद्र में रखना चाहता हूं। अन्य आयताकारों के लिए, क्या उनके भीतर रहने के लिए svg शब्द लपेटता है? मुझे क्षैतिज और लंबवत और शब्द लपेटने वाले दोनों आकारों के भीतर टेक्स्ट डालने के बारे में विशेष रूप से कुछ भी नहीं मिल रहा है। इसके अलावा, पाठ आयताकार नहीं छोड़ सकता है।

http://www.w3.org/TR/SVG/text.html#TextElement उदाहरण को देखकर मदद नहीं होती है क्योंकि पाठ तत्व के x और y आयताकार x और y से अलग हैं। टेक्स्ट तत्वों के लिए चौड़ाई और ऊंचाई प्रतीत नहीं होती है। मैं यहाँ गणित के बारे में निश्चित नहीं हूँ।

(मेरी एचटीएमएल टेबल सिर्फ काम नहीं करेगा।)


एक आयताकार के अंदर पाठ डालने का एक तरीका एक विदेशी वस्तु डालना है, जो एक डीआईवी है, रेक्ट ऑब्जेक्ट के अंदर।

इस तरह, पाठ DIV की सीमाओं को राहत देगा।

var g = d3.select("svg");
					
g.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width","100%")
.attr("height","100%")
.attr("fill","#000");


var fo = g.append("foreignObject")
 .attr("width","100%");

fo.append("xhtml:div")
  .attr("style","width:80%;color:#FFF;margin-right: auto;margin-left: auto;margin-top:40px")
  .text("Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>
<svg width="200" height="200"></svg>


एसवीजी में क्षैतिज और लंबवत केंद्र पाठ का एक आसान समाधान:

  1. उस तत्व की स्थिति को उस तत्व के पूर्ण केंद्र पर सेट करें जिसमें आप इसे केन्द्रित करना चाहते हैं:

    • यदि यह अभिभावक है, तो आप बस x="50%" y ="50%"
    • यदि यह एक और तत्व है, तो x उस तत्व का x होगा + इसकी आधा चौड़ाई (और y लिए समान लेकिन ऊंचाई के साथ)।
  2. मूल्य middle साथ क्षैतिज पाठ को केंद्र में रखने के लिए text-anchor संपत्ति का उपयोग करें:

    मध्य

    प्रस्तुत वर्ण इस तरह गठबंधन किए गए हैं कि परिणामी प्रस्तुत पाठ का ज्यामितीय मध्य प्रारंभिक वर्तमान पाठ स्थिति पर है।

  3. टेक्स्ट middle साथ लंबवत पाठ को केन्द्रित करने के लिए alignment-baseline गुण का उपयोग करें (या इस पर निर्भर करता है कि आप इसे कैसे दिखाना चाहते हैं, आप central करना चाहते हैं)

यहां एक साधारण डेमो है:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>


पिछले उत्तरों ने गोलाकार कोनों या stroke-width का उपयोग करते समय खराब परिणाम दिए हैं> 1। उदाहरण के लिए, आप निम्न कोड को गोलाकार आयत का उत्पादन करने की अपेक्षा करेंगे, लेकिन कोनों को मूल svg घटक द्वारा क्लिप किया गया है:

<svg width="200" height="100">
  <!--this rect should have rounded corners-->
  <rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CLIPPED BORDER</text>    
</svg>

इसके बजाए, मैं एक svg में text को लपेटने की सलाह देता हूं और उसके बाद उस नए svg और rect g तत्व के अंदर एक साथ जोड़ता हूं, जैसा कि निम्न उदाहरण में है:

<!--the outer svg here-->
<svg width="400px" height="300px">

  <!--the rect/text group-->
  <g transform="translate(50,50)">
    <rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/>
    <svg width="200px" height="100px">
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CORRECT BORDER</text>      
    </svg>
  </g>

  <!--rest of the image's code-->
</svg>

यह क्लिपिंग समस्या को हल करता है जो ऊपर दिए गए उत्तरों में होता है। मैंने transform="translate(x,y)" विशेषता का उपयोग करके रेक्ट / टेक्स्ट ग्रुप का भी अनुवाद किया ताकि यह प्रदर्शित किया जा सके कि यह स्क्रीन पर आय / पाठ को पोजिशन करने के लिए एक और सहज ज्ञान प्रदान करता है।


मुझे एसवीजी का उपयोग करके केंद्रित कुछ भी समय मिल गया था, इसलिए मैंने अपना खुद का छोटा काम शुरू किया। उम्मीद है कि यह आपकी मदद करनी चाहिए। ध्यान दें कि यह केवल एसवीजी तत्वों के लिए काम करता है।

function centerinparent(element) { //only works for SVG elements
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}




svg