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.

InformationsquelleAutor Jakub M. | 2011-07-17

5 Kommentare

  1. 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
  2. 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
  3. 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>
    InformationsquelleAutor narendra kumar pradhan
  4. 1

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

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

    JS:

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

    HTML:

        <svg width="510" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="510" height="250" fill="aquamarine" />
    </svg>

    SVG: texto dentro del rect

    InformationsquelleAutor e03050

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea

Java Core
PHP

Preguntas relacionadas

¿Cuál es la forma más sencilla de escribir un archivo de texto en java

Hola, me pregunto ¿cuál es la forma más fácil (y más simple) manera de escribir un archivo de texto en java. Por favor, ser...
Weiterlesen

Derecho tipo mime imágenes SVG con las fuentes incrustadas

Esta es la costumbre SVG tipo mime: image/svg+xml Y funciona muy bien. Sin embargo, cuando la incrustación de un SVG fuente, chrome indica el...
Weiterlesen

Llegar seleccionado la posición del texto

Actualmente estoy recibiendo el texto seleccionado en el explorador de hacer esto: window.getSelection(); Ahora necesito mostrar un tooltip sobre el texto cuando se pulsa...
Weiterlesen
©