SVG rect作为文本的背景

Question

我在SVG中有以下内容：

＆＃13;

＆＃13;

<g transform="translate(1420 1030)">
<rect x="0" y="0" width="300" height="36" class="user-1"></rect>
<image id="my-user-avatar" x="3" y="3" width="30" height="30" xlink:href="/img/user/default-avatar.png"/>
<text id="my-user-nickname" x="40" y="23">USER</text>
</g>

＆＃13;

＆＃13;

＆＃13;

如果文字大于一定数量的字母，则会溢出rect。

如何在SVG中生成具有背景颜色的div的效果，其中它根据其内容在宽度上增长，并在3px的右边保持填充？