SVG: ข้อความภายใน rect

180

ผมต้องการที่จะแสดงบางข้อความภายในrect SVG เป็นไปได้ไหม?

ฉันเหนื่อย

<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

— Jakub M.
แหล่งที่มา

5

เป็นไปได้ที่ซ้ำกันของข้อความแทรกระหว่างสี่เหลี่ยมผืนผ้าวาดใน svg

— Jonas

240

สิ่งนี้เป็นไปไม่ได้ หากคุณต้องการที่จะแสดงข้อความภายในองค์ประกอบ rect คุณควรวางทั้งสองในกลุ่มที่มีองค์ประกอบข้อความมาหลังจากองค์ประกอบ rect (ดังนั้นมันจะปรากฏที่ด้านบน)

<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

มีวิธีที่ไม่ต้องตั้งความสูงและความกว้างใน rect ด้วยตนเองหรือไม่?

— George Mauer

ขึ้นอยู่กับสถานการณ์และสิ่งที่คุณหมายถึงโดย 'ด้วยตนเอง' คุณสามารถสคริปต์ใน JavaScript หากคุณต้องการ (ดูคำตอบของ narendra ด้านล่าง)

— KeatsKelleher

9

ใช้ความรู้ html ของฉัน - ซึ่งอาจใช้ไม่ได้ที่นี่ดูเหมือนว่าgองค์ประกอบมีขนาดโดยนัยที่นี่และฉันต้องการให้สี่เหลี่ยมผืนผ้าขยายขนาดของมัน

— George Mauer

2

กลุ่มเหมาะกับเนื้อหาที่ไม่ใช่วิธีอื่น ฉันคิดว่าองค์ประกอบยังคงสัมพันธ์กับผู้ปกครอง svg

— shuji

องค์ประกอบของกลุ่มมีความสำคัญที่นี่

— dmo

66

โดยใช้โปรแกรมD3 :

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

สิ่งนี้สร้างมาร์กอัปที่แสดงเช่น OP ต้องการ แต่ไม่ได้ทำในสิ่งที่ OP พยายามทำ (ซึ่งไม่ถูกกฎหมาย) <svg><rect/><text/></svg>นี้ยังคงผลิต

— Joshua Taylor

7

Javascript! = SVG คำถามถูกแท็กด้วย svg, text และ rect ไม่มีสิ่งใดบ่งชี้ว่าผู้ใช้มีสิทธิ์เข้าถึงภาษาการเขียนโปรแกรม (ทำคำพูดนี้ตั้งแต่ฉันมาที่นี่เพื่อหาทางแก้ปัญหา)

— aioobe

6

ในขณะที่มันเป็นจริงนี้ไม่เกี่ยวข้องกับคำถามฉันและเห็นได้ชัดว่ามีคนอื่นมาที่นี่เพื่อ D3

— cosmichero2025

1

เป็นไปได้ไหมที่จะปรับความกว้างของข้อความให้เป็นความกว้างโดยอัตโนมัติ

— Colin D

1

@ Colin D นั่นคือสิ่งที่ฉันกำลังมองหาเกินไป แต่มันเป็นไปไม่ได้ที่จะคาดหวังว่ามันจะทำโดยอัตโนมัติ แต่เราต้องทำด้วยตนเองเพื่อให้บรรลุเป้าหมายนั้น มันจะต้องมีการวัดขนาด (ความกว้างและ / หรือความสูง) ขององค์ประกอบทั้งสอง (rect และ text)

— Lex Soft

7

คุณสามารถใช้foreignobjectเพื่อการควบคุมและการวางเนื้อหา HTML ที่หลากหลายบน rect หรือ circle

    <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มีหรือยังไม่มีที่ไหนที่จะเห็น!

— Matt Arnold

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

แสดงข้อความทับโปรแกรมโดยใช้ Javascript พื้นฐาน

 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
แหล่งที่มา