如何在SVG矩形框内放置文字？

要在SVG的矩形框里整齐放置文字，保证对齐规范、适配合理，这几个实用方案直接上手：

1. 基础居中对齐（适合短文本） #

用SVG原生的<text>元素，搭配两个关键属性实现完美居中：

• text-anchor="middle"：让文字水平方向居中于指定x坐标
• dominant-baseline="middle"：让文字垂直方向居中于指定y坐标

只需要把文字的x、y坐标设为对应矩形的中心位置（矩形左上角x+宽度/2，y+高度/2）即可。针对你提供的30x30矩形，中心就是左上角坐标加15。

2. 复杂文本排版（支持多行/自定义样式） #

如果需要多行文字、换行或者更灵活的样式控制，用<foreignObject>嵌入HTML元素，这样可以用CSS实现文本换行、行间距调整等HTML排版特性，完全适配矩形区域。

3. 动态适配文本大小（自动填满矩形） #

如果要让文字自动缩放以填满矩形，可通过JavaScript获取文本和矩形的尺寸，计算缩放比例后调整字体大小或用transform: scale()实现。

修改后的代码示例 #

以下是基于你的SVG代码添加文字后的完整实现，以部分矩形为例展示居中效果：

svg {
  width: 400px;
  display: block;
  margin: auto;
}

.yellow {
  fill: rgb(255,201,14);
}
.green {
  fill: rgb(34,177,76);
}
.purple {
  fill: rgb(63,72,201);
}

/* 文本样式统一设置 */
svg text {
  fill: white;
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
}

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="400" fill="black"/>
  <rect id="s" x="185" y="134" width="30" height="30" />
  
  <!-- 第一行矩形加文字 -->
  <use href="#s" x="-102" y="-68" class="green" />
  <text x="98" y="81">1</text>
  <use href="#s" x="-68" y="-68" class="green" />
  <text x="132" y="81">2</text>
  <use href="#s" x="68" y="-68" class="green" />
  <text x="232" y="81">3</text>
  <use href="#s" x="102" y="-68" class="green" />
  <text x="266" y="81">4</text>
  
  <!-- 第二行矩形加文字 -->
  <use href="#s" x="-136" y="-34" class="green" />
  <text x="64" y="115">5</text>
  <use href="#s" x="-102" y="-34" class="yellow" />
  <text x="98" y="115">6</text>
  <use href="#s" x="-68" y="-34" class="yellow" />
  <text x="132" y="115">7</text>
  <use href="#s" x="-34" y="-34" class="green" />
  <text x="166" y="115">8</text>
  <use href="#s" x="34" y="-34" class="green" />
  <text x="200" y="115">9</text>
  <use href="#s" x="68" y="-34" class="yellow" />
  <text x="232" y="115">10</text>
  <use href="#s" x="102" y="-34" class="yellow" />
  <text x="266" y="115">11</text>
  <use href="#s" x="136" y="-34" class="green" />
  <text x="300" y="115">12</text>
  
  <!-- 第三行矩形加文字 -->
  <use href="#s" x="-136" class="green" />
  <text x="64" y="149">13</text>
  <use href="#s" x="-102" class="yellow" />
  <text x="98" y="149">14</text>
  <use href="#s" x="-68" class="purple" />
  <text x="132" y="149">15</text>
  <use href="#s" x="-34" class="yellow" />
  <text x="166" y="149">16</text>
  <use href="#s" x="0" class="green" />
  <text x="200" y="149">17</text>
  <use href="#s" x="34" class="yellow" />
  <text x="232" y="149">18</text>
  <use href="#s" x="68" class="purple" />
  <text x="266" y="149">19</text>
  <use href="#s" x="102" class="yellow" />
  <text x="300" y="149">20</text>
  <use href="#s" x="136" class="green" />
  <text x="334" y="149">21</text>
  
  <!-- 剩余行可按同样逻辑添加文字 -->
  <use href="#s" x="-136" y="34" class="green" />
  <text x="64" y="183">22</text>
  <use href="#s" x="-102" y="34" class="yellow" />
  <text x="98" y="183">23</text>
  <use href="#s" x="-68" y="34" class="purple" />
  <text x="132" y="183">24</text>
  <use href="#s" x="-34" y="34" class="purple" />
  <text x="166" y="183">25</text>
  <use href="#s" x="0" y="34" class="yellow" />
  <text x="200" y="183">26</text>
  <use href="#s" x="34" y="34" class="purple" />
  <text x="232" y="183">27</text>
  <use href="#s" x="68" y="34" class="purple" />
  <text x="266" y="183">28</text>
  <use href="#s" x="102" y="34" class="yellow" />
  <text x="300" y="183">29</text>
  <use href="#s" x="136" y="34" class="green" />
  <text x="334" y="183">30</text>
  
  <use href="#s" x="-102" y="68" class="green" />
  <text x="98" y="217">31</text>
  <use href="#s" x="-68" y="68" class="yellow" />
  <text x="132" y="217">32</text>
  <use href="#s" x="-34" y="68" class="purple" />
  <text x="166" y="217">33</text>
  <use href="#s" x="0" y="68" class="purple" />
  <text x="200" y="217">34</text>
  <use href="#s" x="34" y="68" class="purple" />
  <text x="232" y="217">35</text>
  <use href="#s" x="68" y="68" class="yellow" />
  <text x="266" y="217">36</text>
  <use href="#s" x="102" y="68" class="green" />
  <text x="300" y="217">37</text>
  
  <use href="#s" x="-68" y="102" class="green" />
  <text x="132" y="251">38</text>
  <use href="#s" x="-34" y="102" class="yellow" />
  <text x="166" y="251">39</text>
  <use href="#s" x="0" y="102" class="purple" />
  <text x="200" y="251">40</text>
  <use href="#s" x="34" y="102" class="yellow" />
  <text x="232" y="251">41</text>
  <use href="#s" x="68" y="102" class="green" />
  <text x="266" y="251">42</text>
  
  <use href="#s" x="-34" y="136" class="green" />
  <text x="166" y="285">43</text>
  <use href="#s" x="0" y="136" class="yellow" />
  <text x="200" y="285">44</text>
  <use href="#s" x="34" y="136" class="green" />
  <text x="232" y="285">45</text>
  
  <use href="#s" x="0" y="170" class="green" />
  <text x="200" y="319">46</text>
  
</svg>

内容的提问来源于stack exchange，提问作者user28597874