SVG: Text in rect

180

Ich möchte Text in SVG anzeigen rect. Ist es möglich?

Ich habe es versucht 

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

Aber es funktioniert nicht.

text svg rect Jakub M.
quelle
5
Mögliches Duplikat des Einfügetextes zwischen einem in svg gezeichneten Rechteck.
Jonas

Antworten:

240

Das ist nicht möglich. Wenn Sie Text in einem Rect-Element anzeigen möchten, sollten Sie beide in eine Gruppe einordnen, wobei das Textelement nach dem Rect-Element steht (so dass es oben angezeigt wird).

<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>
Erweitern Sie das Snippet

KeatsKelleher
quelle
19
Gibt es eine Möglichkeit, Höhe und Breite am Rekt nicht manuell einstellen zu müssen?
George Mauer
Kommt auf die Situation an und was du mit "manuell" meinst. Sie können in JavaScript ein Skript erstellen, wenn Sie möchten (siehe Narendras Antwort unten)
KeatsKelleher
9
Mit meinem HTML-Wissen - das hier möglicherweise nicht zutrifft - scheint das gElement hier eine implizite Größe zu haben, und ich möchte, dass das Rechteck auf seine Größe erweitert wird.
George Mauer
2
Die Gruppe passt zu ihrem Inhalt und nicht umgekehrt. Ich denke, die Elemente sind immer noch relativ zum übergeordneten SVG.
Shuji
ist das Gruppenelement hier wichtig?
dmo
66

Programmgesteuert mit 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
quelle
11
Dies erzeugt ein Markup, das wie von OP gewünscht angezeigt wird , aber nicht das tut, was OP versucht (was nicht legal ist). Dies produziert immer noch <svg><rect/><text/></svg>.
Joshua Taylor
7
Javascript! = SVG. Die Frage ist mit svg, text und rect markiert. Nichts zeigt an, dass der Benutzer Zugriff auf eine Programmiersprache hat. (Diese Bemerkung machen, seit ich hierher gekommen bin, um nach einer statischen Lösung zu suchen.)
aioobe
6
Obwohl es wahr ist, bezieht sich dies nicht auf die Frage, die ich und anscheinend viele andere Leute für D3
cosmichero2025
1
Ist es möglich, das Rechteck automatisch an die Breite des Textes anzupassen
Colin D
1
@Colin D Das ist es, wonach ich auch suche. Es ist jedoch unmöglich zu erwarten, dass dies automatisch erfolgt. Stattdessen müssen wir dies manuell selbst tun, um dies zu erreichen. Es sind einige Messungen der Abmessung (Breite und / oder Höhe) beider Elemente (Rechteck und Text) erforderlich.
Lex Soft
7

Sie können das Fremdobjekt verwenden, um mehr Kontrolle zu erhalten und umfangreichen HTML-Inhalt über Rect oder Circle zu platzieren

    <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>
Erweitern Sie das Snippet

Geben Sie hier die Bildbeschreibung ein

e03050
quelle
Im Gegensatz zur textOption -tags-only hat diese Option den Text tatsächlich in den Pfad eingefügt, anstatt ihn in einem unsichtbaren Bereich darüber zu verstecken! Die xund yAttribute waren für mich nicht notwendig, aber die widthund heightwaren oder es war auch nirgends zu sehen!
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
quelle
0

Programmgesteuertes Anzeigen von Text über Rect mit einfachem 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>
Erweitern Sie das Snippet

Geben Sie hier die Bildbeschreibung ein

e03050
quelle