SVG: rekt içindeki metin


180

SVG içinde bazı metinler görüntülemek istiyorum rect. Mümkün mü?

denedim

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

Ama bu çalışmıyor.


Yanıtlar:


240

Bu mümkün değil. Bir doğrultucu öğenin içindeki metni görüntülemek istiyorsanız, her ikisini de metin öğesinin rektiften sonra geleceği bir gruba koymalısınız (böylece üstte görünür).

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


20
Rektifteki yüksekliği ve genişliği manuel olarak ayarlamak zorunda kalmanın bir yolu var mı?
George Mauer

Duruma ve ne demek istediğinize 'elle' bağlıdır. İsterseniz JavaScript'te komut dosyası oluşturabilirsiniz (aşağıdaki narendra'nın cevabına bakın)
KeatsKelleher

9
Burada geçerli olmayan html bilgimi kullanarak, göğenin burada örtülü bir boyutu var gibi görünüyor ve dikdörtgenin boyutuna genişlemesini istiyorum.
George Mauer

2
Grup, içeriğine başka şekilde uymuyor. Bence unsurlar hala ana svg'ye göreceli.
shuji

grup elemanı burada önemli mi?
dmo

66

Programlı olarak D3 kullanarak :

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
Bu OP'nin istediği gibi görüntülenen bir işaretleme üretir , ancak OP'nin yapmaya çalıştığı şeyi yapmaz (yasal değildir). Bu hala üretiyor <svg><rect/><text/></svg>.
Joshua Taylor

7
Javascript! = SVG. Soru svg, metin ve rect ile etiketlenir. Hiçbir şey kullanıcının bir programlama diline erişiminin olduğunu göstermez. (Buraya buraya geldiğimden beri statik bir çözüm arıyor.)
aioobe

6
Bu doğru olsa da bu benim soru ile ilgili değil ve görünüşe göre birçok insan D3 için buraya geldi
cosmichero2025

1
Rektifi metnin genişliğine otomatik olarak sığdırmak mümkün mü
Colin D

1
@Colin D Ben de bunu arıyorum. Ancak otomatik olarak yapılmasını beklemek imkansız görünüyor. Bunun yerine, bunu başarmak için kendimiz elle yapmalıyız. Her iki öğenin (rect ve metin) bazı boyut ölçümlerine (genişlik ve / veya yükseklik) ihtiyaç duyacaktır.
Lex Soft

7

Daha fazla kontrol ve zengin HTML içeriğini rekt veya daire üzerine yerleştirmek için foreignobject kullanabilirsiniz

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

resim açıklamasını buraya girin


text-Tags-only seçeneğinden farklı olarak , bu aslında metni üstündeki görünmez bir alana gizlemek yerine yolun içine yerleştirdi! xVe ynitelikleri benim için gerekli değildi ama widthve heightvardı ya da yerde görülecek oldu!
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

Temel Javascript kullanarak rektiften programlı olarak metin görüntüleme

 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>

resim açıklamasını buraya girin

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.