SVG: texto dentro del rect

Quiero mostrar algunas de texto dentro de SVG rect. Es posible?

Traté de

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

posibles duplicados de insertar texto entre un rectángulo dibujado en svg.

InformationsquelleAutor Jakub M. | 2011-07-17

5 Comentarios

212

Esto no es posible. Si desea mostrar el texto en el interior de un rect elemento, debe poner a ambos en un grupo con el elemento de texto que viene después de la rect elemento ( por lo que aparece en la parte superior ).

HTML:
```
<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>
```
- Hay una forma para no tener que configurar manualmente la altura y la anchura en el rect?
- Depende de la situación y de lo que quieres decir por «manualmente». Usted puede script en JavaScript, si te gusta (ver narendra la respuesta de abajo)
- El uso de mis conocimientos de html – que bien podrían no aplicar aquí parece que el g elemento tiene implícito un tamaño aquí y me gustaría que el rectángulo para ampliar a su tamaño.
- El grupo se ajusta a su contenido, no de la otra manera. Creo que los elementos están todavía en relación a los padres svg.
- es el grupo elemento importante aquí?
- No en todos. Sin embargo, puede ser útil cuando queremos hacer un estilo o transformación que afecta tanto rect y elementos de texto como un grupo.
InformationsquelleAutor KeatsKelleher
65

Mediante programación utilizando 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')
```
- Esto produce un marcado muestra como el OP quiere, pero no es de lo OP que está tratando de hacer (que no es legal). Esto produce <svg><rect/><text/></svg>.
- Javascript != SVG. La cuestión está etiquetada con svg, texto y rect. Nada indica que el usuario tiene acceso a un lenguaje de programación. (Haciendo de este comentario desde que llegué aquí buscando una solución estática.)
- Mientras que su verdadero esto no pertenecen a la pregunta mí y al parecer a muchas otras personas vinieron aquí para D3
- Es posible ajustar la rect a la anchura del texto
- D Que es lo que estoy buscando también. Pero parece imposible esperar que se haga de forma automática. En su lugar, tenemos que hacerlo manualmente por nosotros mismos para lograrlo. Se necesitan algunas medidas de dimensión (anchura y/o altura) de ambos elementos (rect y texto).
InformationsquelleAutor narendra kumar pradhan

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

InformationsquelleAutor narendra kumar pradhan

Puede utilizar foreignobject para un mayor control y la colocación de HTML enriquecido el contenido a través de rectángulo o círculo

HTML:

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

SVG: texto dentro del rect

InformationsquelleAutor e03050

0

Mediante programación mostrar texto sobre rect utilizando los conceptos básicos de Javascript

JS:

HTML:

InformationsquelleAutor e03050

5 Comentarios

Dejar respuesta Cancelar respuesta