SVG: texto dentro de rect

180

Quero exibir algum texto dentro do SVGrect . É possível?

eu tentei

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

Mas não funciona.

text svg rect

— Jakub M.
fonte

5

possível duplicação do texto

— Jonas

240

Isso não é possível. Se você deseja exibir o texto dentro de um elemento retângulo, coloque-os em um grupo com o elemento de texto após o elemento retângulo (para que apareça na 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 snippet

— KeatsKelleher
fonte

20

Existe uma maneira de não precisar definir manualmente a altura e a largura no reto?

— George Mauer

Depende da situação e do que você quer dizer com 'manualmente'. Você pode script em em JavaScript se você gosta (ver resposta de narendra abaixo)

— KeatsKelleher

9

Usando meu conhecimento de html - que talvez não se aplique aqui - parece que o gelemento tem um tamanho implícito aqui e eu gostaria que o retângulo se expandisse para seu tamanho.

— George Mauer

2

O grupo se ajusta ao seu conteúdo e não o contrário. Eu acho que os elementos ainda são relativos ao svg pai.

— shuji 27/01

o elemento do grupo é importante aqui?

— dmo 31/05

66

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

11

Isso produz uma marcação que é exibida como o OP deseja, mas não faz o que o OP está tentando fazer (o que não é legal). Isso ainda produz <svg><rect/><text/></svg>.

— Joshua Taylor

7

Javascript! = SVG. A pergunta está marcada com svg, text e rect. Nada indica que o usuário tenha acesso a uma linguagem de programação. (Fazer esta observação desde que eu vim aqui à procura de uma solução estática.)

— aioobe

6

Enquanto seu verdadeiro isso não dizem respeito à questão me e aparentemente muitas outras pessoas vieram aqui para D3

— cosmichero2025

1

É possível autofit o rect à largura do texto

— Colin D

1

@ Colin D É o que eu também estou procurando. Mas parece impossível esperar que isso seja feito automaticamente. Em vez disso, temos que fazer isso manualmente sozinhos para conseguir isso. Serão necessárias algumas medidas de dimensão (largura e / ou altura) de ambos os elementos (retas e texto).

— Lex macia

7

Você pode usar o objeto estrangeiro para ter mais controle e colocar um rico conteúdo HTML sobre retângulo ou círculo

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

— e03050
fonte

Diferentemente da textopção -tags-only, esta colocou o texto dentro do caminho em vez de ocultá-lo em algum espaço invisível acima dele! Os atributos xe ynão eram necessários para mim, mas o widthe heightwere ou também não estava em lugar algum!

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

0

Exibir programaticamente o texto sobre o retângulo 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 snippet

— e03050
fonte