在軌道上的紅寶石的html繪製矩形與文本里面

Question

這裏是我的目標，我有一堆數據，名稱數組包含名稱值，同樣的重量，高度，顏色。

所以在我的控制器功能，我有以下 我的數據庫名字的人

def display 
    people= Person.all 
end 

而且裏面display.html.erb：

<h1> Display Result</h1> 
<div id='chart'> 
    <% @people.each do |x| %> 
     <svg width="<%=x.weight%>" height="<%=x.height%>"> 
      <rect width = "<%=x.weight%>" height="<%=x.height%>" style="fill:<%=x.color%>;stroke-width:3;stroke:black"> 
      <text fill="#ffffff",50,50><%= x.name %></text> 
     </svg> 
    <% end %> 
</div> 

希望有類似以上，由於矩形隨高度和重量而變化，重量是水平的而高度是垂直的。

已經能夠繪製矩形，但需要將文本放在矩形內，任何想法如何才能將其定位在矩形內？ 任何想法如何解決它，在此先感謝您的幫助！

Answer 1

使用導軌連接來固定您的高度和寬度。

<h1> Display Result</h1> 
<div id='chart'> 
    <%= @people.each do |x| %> 
    <svg width = "500" height = "500"> 
     <rect width="<%= x.weight %>" height="<%= x.height%>" style="fill:<%= x.color %>;stroke-width:3;stroke:black"> 
     <text fill="#ffffff">x.name</text> 
    </svg> 
    <% end %> 
</div> 
<%= link_to 'Back', {:controller => 'people', :action => 'index'}, id:'proceedss' %>