如何将字母放入盒子内

Question

我想把字母放在盒子里。

我该怎么做？

我正在尝试弄清楚如何将字母放入盒子内。

我心中有一个具体的设计目标：我想将字母有效且美观地放置在盒子内。然而，我目前面临着找出实现这一目标的最佳方法的挑战。

为了详细说明，我正在尝试确定最有效的方法来将字母整齐地放置在预定义的框区域内。我的目的是确保字母完全适合盒子内，保持对齐、间距和整体视觉吸引力。

代码：https://jsfiddle.net/u5g7bo8L/

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 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" />
  <use href="#s" x="-68" y="-68" class="green" />
  <use href="#s" x="68" y="-68" class="green" />
  <use href="#s" x="102" y="-68" class="green" />
  
  <use href="#s" x="-136" y="-34" class="green" />
  <use href="#s" x="-102" y="-34" class="yellow" />
  <use href="#s" x="-68" y="-34" class="yellow" />
  <use href="#s" x="-34" y="-34" class="green" />
  <use href="#s" x="34" y="-34" class="green" />
  <use href="#s" x="68" y="-34" class="yellow" />
  <use href="#s" x="102" y="-34" class="yellow" />
  <use href="#s" x="136" y="-34" class="green" />
  
  <use href="#s" x="-136" class="green" />
  <use href="#s" x="-102" class="yellow" />
  <use href="#s" x="-68" class="purple" />
  <use href="#s" x="-34" class="yellow" />
  <use href="#s" x="0" class="green" />
  <use href="#s" x="34" class="yellow" />
  <use href="#s" x="68" class="purple" />
  <use href="#s" x="102" class="yellow" />
  <use href="#s" x="136" class="green" />
  
  <use href="#s" x="-136" y="34" class="green" />
  <use href="#s" x="-102" y="34" class="yellow" />
  <use href="#s" x="-68" y="34" class="purple" />
  <use href="#s" x="-34" y="34" class="purple" />
  <use href="#s" x="0" y="34" class="yellow" />
  <use href="#s" x="34" y="34" class="purple" />
  <use href="#s" x="68" y="34" class="purple" />
  <use href="#s" x="102" y="34" class="yellow" />
  <use href="#s" x="136" y="34" class="green" />
  
  <use href="#s" x="-102" y="68" class="green" />
  <use href="#s" x="-68" y="68" class="yellow" />
  <use href="#s" x="-34" y="68" class="purple" />
  <use href="#s" x="0" y="68" class="purple" />
  <use href="#s" x="34" y="68" class="purple" />
  <use href="#s" x="68" y="68" class="yellow" />
  <use href="#s" x="102" y="68" class="green" />
  
  <use href="#s" x="-68" y="102" class="green" />
  <use href="#s" x="-34" y="102" class="yellow" />
  <use href="#s" x="0" y="102" class="purple" />
  <use href="#s" x="34" y="102" class="yellow" />
  <use href="#s" x="68" y="102" class="green" />
  
  <use href="#s" x="-34" y="136" class="green" />
  <use href="#s" x="0" y="136" class="yellow" />
  <use href="#s" x="34" y="136" class="green" />
  
  <use href="#s" x="0" y="170" class="green" />
  
</svg>

Answer 1

您知道正方形的大小 (30x30) 及其在 SVG 中的位置（带有

x

的矩形的

y

和

id="s"

以及实现

x

元素的

y

和

use

）它。）有了这些信息，您可以找到每个的绝对中心与这个公式平方：

x_中心 = x_#s + x_使用 + 15
y_中心 = y_#s + y_使用 + 15

一旦获得该值，您将在要放置字母的正方形的绝对中心放置一个

<text>

元素，然后应用样式：

text {
  text-anchor: middle;
  dominant-baseline: central;
}

这将渲染文本，其中心位于

x

和

y

标记中指示的位置。广场中心。

让我们回顾一下一个正方形的情况：

---

<text>

我们将添加一个 

<rect id="s" x="185" y="134" width="30" height="30" />

<use href="#s" x="-102" y="-68" class="green" />

，其中

<text>

和

x

值将是：x

文字

= 185 + (-102) + 15 = 98 _y文本
= 134 + (-68) + 15 = 81 所以下面的文字：

y

将显示一个绿色方块，中心有字母 A。

将文本的颜色和大小调整为您想要的，就完成了。

这是一个演示，其中包含问题的代码和添加的一些字母（不是全部）：

---

<use href="#s" x="-102" y="-68" class="green" />
<text href="#t" x="98" y="81">A</text>

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);
}

text {
  fill: #000;
  /* 
  with text-anchor: middle and dominant-baseline: central, 
  the text will be centered in the x,y point
  */
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 2em;
}