SVG: texto dentro de rect

180

Quiero mostrar algo de texto dentro de SVG rect. ¿Es posible?

Lo intenté

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

Pero no funciona.

text svg rect Jakub M.
fuente

55

posible duplicado de insertar texto entre un rectángulo dibujado en svg.

Jonas

240

Esto no es posible. Si desea mostrar texto dentro de un elemento rect, debe colocarlos en un grupo con el elemento de texto que sigue al elemento rect (para que aparezca en la parte superior).

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

Expandir fragmento

KeatsKelleher
fuente

20

¿Hay alguna manera de no tener que establecer manualmente la altura y el ancho en el rectángulo?

George Mauer

Depende de la situación y de lo que quiere decir con "manualmente". Puede escribir en JavaScript si lo desea (ver la respuesta de Narendra a continuación)

KeatsKelleher

9

Usando mi conocimiento html, que bien podría no aplicarse aquí, parece que el gelemento tiene un tamaño implícito aquí y me gustaría que el rectángulo se expanda a su tamaño.

George Mauer

2

El grupo se ajusta a su contenido, no al revés. Creo que los elementos todavía son relativos al svg principal.

shuji

¿El elemento del grupo es importante aquí?

dmo

66

Programáticamente 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
fuente

11

Esto produce un marcado que se muestra como OP quiere, pero no hace lo que OP está tratando de hacer (lo cual no es legal). Esto todavía produce <svg><rect/><text/></svg>.

Joshua Taylor

77

Javascript! = SVG. La pregunta está etiquetada con svg, text y rect. Nada indica que el usuario tenga acceso a un lenguaje de programación. (Haciendo este comentario desde que vine aquí buscando una solución estática.)

aioobe

66

Si bien es cierto, esto no pertenece a la pregunta, y aparentemente muchas otras personas vinieron aquí por D3

cosmichero2025

1

¿Es posible ajustar automáticamente el rect al ancho del texto

Colin D

1

@Colin D Eso es lo que estoy buscando también. Pero parece imposible esperar que se haga automáticamente. En cambio, tenemos que hacerlo manualmente por nosotros mismos para lograrlo. Necesitará algunas medidas de dimensión (ancho y / o alto) de ambos elementos (rect y texto).

Lex Soft el

7

Puede usar foreignobject para obtener más control y colocar contenido HTML enriquecido sobre 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>

Expandir fragmento

e03050
fuente

A diferencia de la textopción -tags-only, ¡esta realmente colocó el texto dentro de la ruta en lugar de ocultarlo en algún espacio invisible encima! ¡Los atributos xy yno eran necesarios para mí, pero los widthy heighteran o tampoco estaban por ningún lado!

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
fuente

0

Muestra programáticamente texto sobre rect usando Javascript básico

 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>

Expandir fragmento

e03050
fuente

SVG: texto dentro de rect

Respuestas: