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.


Respuestas:


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>


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

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>

ingrese la descripción de la imagen aquí


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> 

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>

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.