帶有背景和填充的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>