svg rect 渲染问题

Question

<svg style="width:1000px; height:100px" viewBox="0 0 1000 40">
    <rect  x="20%" y="0" height='40' width='60%'  rx="15" ry="15" fill='red'/>
    <!-- <text x="0" y="0" fill="red" font-size='30' height='40' width='20%'>I love SVG</text> -->
    <!-- <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle> -->
    <text x="80%" y="0" fill="red" font-size='30' height='40' width='20%'>I love SVG</text>

  </svg>

渲染效果如图：

为什么矩形和文字不是一排的？