SVG: teks di dalam kotak

180

Saya ingin menampilkan beberapa teks di dalam SVG rect. Apa itu mungkin?

Saya mencoba 

<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>

Tapi itu tidak berhasil.

text svg rect Jakub M.
sumber
5
kemungkinan duplikat teks sisipan antara persegi panjang yang digambar dalam svg.
Jonas

Jawaban:

240

Ini tidak mungkin. Jika Anda ingin menampilkan teks di dalam elemen persegi Anda harus menempatkan keduanya dalam grup dengan elemen teks muncul setelah elemen persegi (sehingga muncul di atas).

<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>
Luaskan cuplikan

KeatsKelleher
sumber
20
Apakah ada cara untuk tidak harus mengatur tinggi dan lebar secara manual pada kotak?
George Mauer
Tergantung pada situasi dan apa yang Anda maksud dengan 'secara manual'. Anda dapat skrip dalam JavaScript jika Anda suka (lihat jawaban narendra di bawah ini)
KeatsKelleher
9
Menggunakan pengetahuan html saya - yang mungkin tidak berlaku di sini - sepertinya gelemen memiliki ukuran implisit di sini dan saya ingin persegi panjang untuk memperluas ke ukurannya.
George Mauer
2
Grup cocok dengan kontennya, bukan sebaliknya. Saya pikir elemen masih relatif terhadap svg induk.
shuji
Apakah elemen grup penting di sini?
dmo
66

Secara terprogram menggunakan 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')
narendra kumar pradhan
sumber
11
Ini menghasilkan markup yang ditampilkan seperti yang diinginkan OP, tetapi tidak melakukan apa yang OP coba lakukan (yang tidak sah). Ini masih menghasilkan <svg><rect/><text/></svg>.
Joshua Taylor
7
Javascript! = SVG. Pertanyaan ini ditandai dengan svg, teks dan kotak. Tidak ada yang menunjukkan bahwa pengguna memiliki akses ke bahasa pemrograman. (Membuat komentar ini sejak saya datang ke sini mencari solusi statis.)
aioobe
6
Walaupun ini benar, ini tidak berkaitan dengan pertanyaan saya dan tampaknya banyak orang datang ke sini untuk D3
cosmichero2025
1
Apakah mungkin untuk autofit rect ke lebar teks
Colin D
1
@Colin D Itulah yang saya cari juga. Tapi sepertinya tidak mungkin mengharapkannya dilakukan secara otomatis. Sebaliknya, kita harus melakukannya sendiri secara manual untuk mencapai itu. Diperlukan beberapa pengukuran dimensi (lebar dan / atau tinggi) dari kedua elemen (kotak dan teks).
Lex Soft
7

Anda dapat menggunakan objek asing untuk kontrol lebih besar dan menempatkan konten HTML kaya di atas persegi atau lingkaran

    <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>
Luaskan cuplikan

masukkan deskripsi gambar di sini

e03050
sumber
Tidak seperti opsi text-tag-only, yang ini benar-benar menempatkan teks di dalam path alih-alih menyembunyikannya di ruang tak terlihat di atasnya! The xdan yatribut tidak perlu bagi saya tapi widthdan heightberada atau juga itu tidak terlihat!
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>
narendra kumar pradhan
sumber
0

Secara terprogram menampilkan teks melalui kotak menggunakan Javascript dasar

 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>
Luaskan cuplikan

masukkan deskripsi gambar di sini

e03050
sumber