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


Risposte:


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>


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

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>

inserisci qui la descrizione dell'immagine


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> 

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>

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.