texto - text to svg online

SVG: texto dentro de rect

Question

Quiero mostrar un 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.

Answer 1

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>

Answer 2

Mediante programación mediante 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'')

Answer 3

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