带有背景和填充的svg文本

Question

我对svg不太熟悉。 我有这个标记，用于显示浅灰色背景的文本。 但是背景与文字非常接近。 我想在右侧和左侧添加一些填充。 是否可以通过修改属性而不对标记做大的改动来实现？

svg标记是由JointJS插件创建的。 因此，宽度由脚本设置。

<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

svg标记正在绘制一个圆角矩形和一些文本。 放置矩形和文本的位置应使文本大致位于矩形的中心。 如果要在文本和矩形的边缘之间添加填充，则需要增加矩形的宽度（通过增加rect的width属性）以在矩形中创建更多的空间。 然后，您需要重新放置矩形（通过减小rect的x属性）或重新放置文本（通过增加tspan的x属性），以使文本居中于调整大小的矩形上方。

例如，下面的代码将使矩形的宽度增加10个单位，并将矩形的位置向左移动5个单位，这将使矩形在文本下方居中。

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