带有背景和填充的 svg 文本答案

【问题标题】：svg text with background and padding带有背景和填充的 svg 文本
【发布时间】：2015-11-03 05:52:56
【问题描述】：

我对 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>

【问题讨论】：

标签： svg

【解决方案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>

【讨论】：