SVG文本和矩形的相對大小

當SVG元素添加屬性（width，height，viewBox）時，是否有人能夠提供對矩形和文本相對大小變化的解釋？（在Firefox 30測試在Linux x86_64的）SVG文本和矩形的相對大小

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title>Test</title> 
    <script src="jquery.js"></script> 
    <script src="d3.js"></script> 
</head> 

<body> 

    <svg> 
    <g transform="translate(10, 10)"> 
     <rect fill="yellow" height="7.45em" width="29.4em"></rect> 
     <text stroke="black"> 
      <tspan dy="1.69em" x="2.65em">PNUUUUUUUUU</tspan> 
      <tspan dy="1.69em" x="2.65em">TEST TEST TEST TEST TEST</tspan> 
      <tspan dy="1.69em" x="2.65em">EEE</tspan> 
      <tspan dy="1.69em" x="2.65em">QQQ</tspan> 
     </text> 
    </g> 
    </svg> 
</body> 

</html>

顯示爲期望的：

enter image description here