title: svg text with background and padding
body: <p>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?</p>
  
  <p>The svg markup is beeing created by JointJS plugin. So the width is being set by the script.</p>
  
  <pre><code>&lt;g class="labels" id="v-33"&gt;
      &lt;g class="label" id="v-53" label-idx="0" cursor="move" transform="translate(470, 109.71968078613281)"&gt;
          &lt;rect fill="#eeeeee" rx="3" ry="3" x="-19.140625" y="-11.890625" width="38.265625" height="17"&gt;&lt;/rect&gt;
          &lt;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)"&gt;
              &lt;tspan dy="0em" x="0" id="v-55" class="v-line"&gt;cdscds&lt;/tspan&gt;
          &lt;/text&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>