এসভিজি: রেক্টরের ভিতরে পাঠ্য

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

এসভিজিতে আঁকা একটি আয়তক্ষেত্রের মধ্যে সন্নিবেশ পাঠ্যের

— জোনাস

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
সূত্র

19

রেক্টরে ম্যানুয়ালি উচ্চতা এবং প্রস্থ নির্ধারণ না করার কোনও উপায় আছে কি?

— জর্জ মাউয়ার

পরিস্থিতি এবং 'ম্যানুয়ালি' দ্বারা আপনি কী বোঝাতে চান তার উপর নির্ভর করে। আপনি চাইলে জাভাস্ক্রিপ্টে স্ক্রিপ্ট করতে পারেন (নীচে নরেন্দ্রর উত্তরটি দেখুন)

— কেটসেলহেহের

9

আমার এইচটিএমএল জ্ঞান ব্যবহার করে - যা এখানে ভাল প্রয়োগ নাও হতে পারে - মনে হচ্ছে gউপাদানটির এখানে একটি অন্তর্নিহিত আকার রয়েছে এবং আমি চাই আয়তক্ষেত্রটি এর আকারে প্রসারিত হোক।

— জর্জ মাউয়ার

2

গোষ্ঠীটি অন্যভাবে নয় তার সামগ্রীতে ফিট করে। আমি মনে করি উপাদানগুলি এখনও পিতামাতার svg এর সাথে আপেক্ষিক।

— শুজি

গ্রুপ উপাদান এখানে গুরুত্বপূর্ণ?

— 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

জাভাস্ক্রিপ্ট! = এসভিজি। প্রশ্নটি এসজিজি, পাঠ্য এবং রেকর্ডের সাথে ট্যাগ করা হয়। কিছুই বোঝায় না যে ব্যবহারকারীর একটি প্রোগ্রামিং ভাষার অ্যাক্সেস রয়েছে। (স্থির সমাধানের সন্ধানে আমি এখানে আসার পর থেকে এই মন্তব্যটি করা।)

— আইওবে

6

যদিও এটি সত্য এটি আমার প্রশ্নের সাথে সম্পর্কিত নয় এবং দৃশ্যত আরও অনেক লোক D3- এর জন্য এখানে এসেছিলেন

— cosmichero2025

1

পাঠ্যটির প্রস্থে আয়ত্তটি অটোফিট করা সম্ভব

— কলিন ডি

1

@ কলিন ডি আমি এটিই সন্ধান করছি। তবে এটি স্বয়ংক্রিয়ভাবে সম্পন্ন হওয়া আশা করা অসম্ভব বলে মনে হচ্ছে। পরিবর্তে, এটি অর্জনের জন্য আমাদের নিজেরাই এটি করতে হবে। এটি উভয় উপাদান (আয়ত এবং পাঠ্য) এর মাত্রা (প্রস্থ এবং / বা উচ্চতা) এর কিছু পরিমাপ প্রয়োজন।

— লেক্স সফট

7

আপনি আরও নিয়ন্ত্রণ এবং রেকট বা চেনাশোনায় সমৃদ্ধ এইচটিএমএল সামগ্রী রাখার জন্য বিদেশী বস্তুটি ব্যবহার করতে পারেন

    <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
সূত্র