svg text with background and padding

Question

I'm not very familiar with svg. I have this markup for showing a text with a light gray background. But the background is very close to the text. I would like to add some padding on the right and on the left. Is this possible by modifying attributes without doing big changes to the markup?

The svg markup is beeing created by JointJS plugin. So the width is being set by the script.

<g class="labels" id="v-33">
    <g class="label" id="v-53" label-idx="0" cursor="move" transform="translate(470, 109.71968078613281)">
        <rect fill="#eeeeee" rx="3" ry="3" x="-19.140625" y="-11.890625" width="38.265625" height="17"></rect>
        <text text-anchor="middle" font-size="12" ref="rect" id="v-54" y="0.8em" display="null" xml:space="preserve" transform="translate(0,-8.5)">
            <tspan dy="0em" x="0" id="v-55" class="v-line">cdscds</tspan>
        </text>
    </g>
</g>

Answer 1

The svg markup is drawing a rounded rectangle and some text. The rectangle and text are positioned such that the text is roughly centered over the rectangle. If you want to add padding between the text and the edges of the rectangle then you would need to increase the rectangle's width (by increasing rect's width attribute) to create more space in the rectangle. And then you would need to either reposition the rectangle (by deceasing rect's x attribute) or reposition the text (by increasing tspan's x attribute) such that the text was centered over the resized rectangle.

For example, the following would increase the rectangle's width by 10 units and move the rectangle's position left by 5 units which would keep the rectangle centered under the text.

<rect fill="#eeeeee" rx="3" ry="3" x="-24.140625" y="-11.890625" width="48.265625" height="17"></rect>