एसवीजी: टेक्स्ट रेक्ट के अंदर

180

मैं एसवीजी के अंदर कुछ पाठ प्रदर्शित करना चाहता हूं rect। क्या यह संभव है?

मैंने कोशिश की

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

लेकिन यह काम नहीं करता है।

text svg rect

— जकुब एम।
स्रोत

5

svg में तैयार आयत के बीच सम्मिलित पाठ

— जोनास

240

यह नहीं हो सकता। यदि आप एक मूल तत्व के अंदर पाठ प्रदर्शित करना चाहते हैं, तो आपको उन दोनों को समूह में रखना चाहिए जिसमें मूल तत्व के बाद आने वाला पाठ तत्व है (इसलिए यह शीर्ष पर दिखाई देता है)।

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>

स्निपेट का विस्तार करें

— KeatsKelleher
स्रोत

20

वहाँ एक तरीका है कि मैन्युअल रूप से ऊंचाई और चौड़ाई को निर्धारित नहीं करना है?

— जॉर्ज मौअर

स्थिति पर निर्भर करता है और आप 'मैन्युअल' से क्या मतलब है। यदि आप चाहें तो जावास्क्रिप्ट को स्क्रिप्ट में देख सकते हैं (नीचे नरेंद्र का जवाब देखें)

— KeatsKelleher

9

मेरे html ज्ञान का उपयोग करना - जो शायद यहां लागू नहीं हो सकता है - ऐसा लगता है जैसे gतत्व का यहां एक अंतर्निहित आकार है और मैं इसे आकार में विस्तार करने के लिए आयताकार चाहूंगा।

— जॉर्ज मौयर

2

समूह अपनी सामग्री के लिए फिट बैठता है दूसरे तरीके से नहीं। मुझे लगता है कि तत्व अभी भी मूल svg के सापेक्ष हैं।

— शुजी २ sh

क्या समूह तत्व यहाँ महत्वपूर्ण है?

— dmo

66

प्रोग्रामेटिक रूप से डी 3 का उपयोग करना :

body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')

— नरेन्द्र कुमार प्रधान
स्रोत

11

यह मार्कअप का उत्पादन करता है जो ओपी चाहता है जैसे प्रदर्शित करता है, लेकिन यह वह नहीं करता है जो ओपी करने की कोशिश कर रहा है (जो कानूनी नहीं है)। यह अभी भी पैदा करता है <svg><rect/><text/></svg>।

— जोशुआ टेलर

7

जावास्क्रिप्ट! = एसवीजी। प्रश्न को svg, text और rect के साथ टैग किया गया है। कुछ भी इंगित नहीं करता है कि उपयोगकर्ता के पास प्रोग्रामिंग भाषा तक पहुंच है। (जब से मैं एक स्थिर समाधान की तलाश में यहाँ आया था तब से यह टिप्पणी करना।)

— aioobe

6

हालांकि यह सच है यह मुझसे सवाल नहीं करता है और जाहिरा तौर पर कई अन्य लोग डी 3 के लिए यहां आए

— cosmichero2025

1

क्या पाठ की चौड़ाई के लिए आयत को स्वत: स्फूर्त करना संभव है

— कॉलिन डी

1

@ कोलिन डी कि मैं भी क्या देख रहा हूँ। लेकिन यह अपने आप होने की उम्मीद करना असंभव लगता है। इसके बजाय, हमें इसे हासिल करने के लिए खुद से ऐसा करना होगा। इसमें दोनों तत्वों (आयत और पाठ) के आयाम (चौड़ाई और / या ऊंचाई) के कुछ मापों की आवश्यकता होगी।

— लेक्स सॉफ्ट

7

आप अधिक नियंत्रण के लिए विदेशी धनराशि का उपयोग कर सकते हैं और समृद्ध HTML सामग्री को रेक्ट या सर्कल पर रख सकते हैं

    <svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="250" height="250" fill="aquamarine" />
        <foreignobject x="0" y="0" width="250" height="250">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div>Here is a long text that runs more than one line and works as a paragraph</div>
                <br />
                <div>This is <u>UNDER LINE</u> one</div>
                <br />
                <div>This is <b>BOLD</b> one</div>
                <br />
                <div>This is <i>Italic</i> one</div>
            </body>
        </foreignobject>
    </svg>

स्निपेट का विस्तार करें

— e03050
स्रोत

text-टैग-ओनली ऑप्शन के विपरीत , यह वास्तव में पाठ को पथ के अंदर रखता है बजाय इसके ऊपर के किसी अदृश्य स्थान में छुपाने के लिए! xऔर yगुण मेरे लिए आवश्यक नहीं थे, लेकिन widthऔर heightथे या यह भी देखने की बात कहीं भी नहीं था!

— मैट अर्नोल्ड

4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(145,200,103);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(132,168,86);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="220" height="30" class="GradientBorder" fill="url(#grad1)" />
  <text x="60" y="20" font-family="Calibri" font-size="20" fill="white" >My Code , Your Achivement....... </text>
  </g>
</svg>

— नरेन्द्र कुमार प्रधान
स्रोत

0

मूल जावास्क्रिप्ट का उपयोग करके प्रोग्राम को मूल रूप से पाठ पर प्रदर्शित करें

 var svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', 20);
        text.setAttribute('y', 50);
        text.setAttribute('width', 500);
        text.style.fill = 'red';
        text.style.fontFamily = 'Verdana';
        text.style.fontSize = '35';
        text.innerHTML = "Some text line";

        svg.appendChild(text);

        var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text2.setAttribute('x', 20);
        text2.setAttribute('y', 100);
        text2.setAttribute('width', 500);
        text2.style.fill = 'green';
        text2.style.fontFamily = 'Calibri';
        text2.style.fontSize = '35';
        text2.style.fontStyle = 'italic';
        text2.innerHTML = "Some italic line";

       
        svg.appendChild(text2);

        var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text3.setAttribute('x', 20);
        text3.setAttribute('y', 150);
        text3.setAttribute('width', 500);
        text3.style.fill = 'green';
        text3.style.fontFamily = 'Calibri';
        text3.style.fontSize = '35';
        text3.style.fontWeight = 700;
        text3.innerHTML = "Some bold line";

       
        svg.appendChild(text3);

    <svg width="510" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="510" height="250" fill="aquamarine" />
    </svg>

स्निपेट का विस्तार करें

— e03050
स्रोत