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>

svg文本与背景和填充

1 个答案: