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