SVG: testo all'interno di rect

180

Voglio visualizzare del testo all'interno di SVG rect. È possibile?

Provai

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

Ma non funziona

text svg rect

— Jakub M.
fonte

5

possibile duplicato del testo inserito tra un rettangolo disegnato in svg.

— Jonas,

240

Non è possibile. Se si desidera visualizzare il testo all'interno di un elemento rettangolo, è necessario inserirli entrambi in un gruppo con l'elemento di testo che segue l'elemento rettangolo (in modo che appaia in alto).

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

Espandi frammento

— KeatsKelleher
fonte

20

C'è un modo per non dover impostare manualmente altezza e larghezza sul rettangolo?

— George Mauer,

Dipende dalla situazione e da cosa intendi per "manualmente". Se lo desideri, puoi scrivere in JavaScript (vedi la risposta di narendra di seguito)

— KeatsKelleher

9

Usando la mia conoscenza html - che potrebbe non essere applicabile qui - sembra che l' gelemento abbia una dimensione implicita qui e vorrei che il rettangolo si espandesse alla sua dimensione.

— George Mauer,

2

Il gruppo si adatta al suo contenuto e non viceversa. Penso che gli elementi siano ancora relativi al genitore svg.

— shuji,

l'elemento di gruppo è importante qui?

— dmo

66

Programmaticamente usando 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
fonte

11

Questo produce markup che viene visualizzato come vuole OP, ma non fa ciò che OP sta cercando di fare (che non è legale). Questo produce ancora <svg><rect/><text/></svg>.

— Joshua Taylor,

7

Javascript! = SVG. La domanda è taggata con svg, testo e rettangolo. Nulla indica che l'utente abbia accesso a un linguaggio di programmazione. (Facendo questa osservazione da quando sono venuto qui alla ricerca di una soluzione statica.)

— aioobe,

6

Anche se è vero, questo non riguarda la domanda me e apparentemente molte altre persone sono venute qui per D3

— cosmichero2025,

1

È possibile adattare automaticamente il rettangolo alla larghezza del testo

— Colin D

1

@Colin D È quello che sto cercando anch'io. Ma sembra impossibile aspettarselo fatto automaticamente. Invece, dobbiamo farlo manualmente da soli per raggiungere questo obiettivo. Avrà bisogno di alcune misure di dimensione (larghezza e / o altezza) di entrambi gli elementi (rettangolo e testo).

— Lex Soft

7

Puoi usare Foreignobject per un maggiore controllo e posizionare ricchi contenuti HTML su rect o 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>

Espandi frammento

— e03050
fonte

Diversamente textdall'opzione -tags-only, questa in realtà ha inserito il testo all'interno del percorso invece di nasconderlo in uno spazio invisibile sopra di esso! Le xe yattributi non sono stati necessari per me, ma la widthe heightera o era anche nessun posto essere visti!

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

0

Visualizza a livello di codice testo su rettangolo usando Javascript di base

 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>

Espandi frammento

— e03050
fonte