SVG: texto dentro de rect

126

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

me trataron

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

Fuente

2011-07-17 Jakub M.

posible duplicado de (http://stackoverflow.com/questions/5449899/insert-text-between-a-rectangle-drawn-in-svg) – Jonas

163

Esto no es posible. Si desea visualizar texto dentro de un elemento recto, debe colocarlos en un grupo con el elemento de texto que viene después del 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>

Fuente

2011-07-18 11:59:07 KeatsKelleher

+10

¿Hay alguna forma de no tener que configurar manualmente el alto y el ancho en el rect? –

Depende de la situación y lo que quiere decir con 'manualmente'. Puede guiar en JavaScript si lo desea (ver la respuesta de narendra a continuación) – KeatsKelleher

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

programación utilizando D3: [. Insertar texto entre un rectángulo dibujado en SVG]

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

Fuente

2012-08-13 13:17:29

Esto produce marcas que * muestra * como OP quiere, pero no hace lo que OP intenta hacer (lo que no es legal). Esto todavía produce ''. –

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 esta observación desde que vine aquí buscando una solución estática). – aioobe

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

Fuente

2012-08-13 13:21:16

Respuesta

Cuestiones relacionadas