SVG: văn bản bên trong rect

Question

Tôi muốn hiển thị một số văn bản bên trong SVG rect. Có thể không?

tôi đã cố gắng

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

Nhưng nó không hoạt động.

Answer 1

Điều này là không thể. Nếu bạn muốn hiển thị văn bản bên trong một phần tử rect bạn nên đặt cả hai trong một nhóm với phần tử văn bản đến sau phần tử rect (vì vậy nó xuất hiện trên đầu trang).

<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

lập trình sử dụng D3: [. Chèn văn bản giữa một hình chữ nhật được vẽ trong 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') 

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>