htmlcsssvgtext

How to place letters inside the boxes

I want to place letters inside the boxes.

How would I do that?

I am trying to figure out how to place letters inside the boxes.

I have a specific design goal in mind: I want to place letters inside the boxes effectively and aesthetically. However, I'm currently facing challenges in figuring out the best way to achieve this.

To elaborate, I'm trying to determine the most efficient method to position letters neatly within predefined box areas. My intention is to ensure that the letters fit perfectly inside the boxes, maintaining alignment, spacing, and overall visual appeal.

code: 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>

Solution

  • You know the size of the squares (30x30) and their position in the SVG (the x and y of the rectangle with id="s" plus the x and y of the use element that implements it.) With that information, you can find the absolute center of each square with this formula:

    xcenter = x#s + xuse + 15
    ycenter = y#s + yuse + 15

    Once you have that value, you will place a <text> element in the absolute center of the square where you want the letter to be, and you will apply the styles:

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

    Which will render the text with its center at the x and y indicated in the <text> tag. The center of the square.

    Let's review how it would be for one square:

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

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

    we will add a <text> where the x and y values will be:

    xtext = 185 + (-102) + 15 = 98
    ytext = 134 + (-68) + 15 = 81

    So the following text:

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

    will show a green square with the letter A in the center.

    Adjust the color and size of the text to whatever you want, and you'll be done.

    Here is a demo with the code from the question and some letters added (not all):

    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;
}
    <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" />
  
  <!-- 
  x = 98 = 185 + (-102) + 15
  185 is the original position of the rectangle with id="s"
  -102 is the position of the element <use> with href="#s"
  15 is half the size of the rectangle (30 / 2)
  
  Same logic applies for the value of y
  -->
  <text href="#t" x="98" y="81">H</text>
  <text href="#t" x="132" y="81">O</text>
  <text href="#t" x="268" y="81">L</text>
  <text href="#t" x="302" y="81">A</text>
  
  <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" />
  
  <text href="#t" x="64" y="115">C</text>
  <text href="#t" x="98" y="115">A</text>
  <text href="#t" x="132" y="115">R</text>
  <text href="#t" x="166" y="115">A</text>
  <text href="#t" x="234" y="115">C</text>
  <text href="#t" x="268" y="115">O</text>
  <text href="#t" x="302" y="115">L</text>
  <text href="#t" x="336" y="115">A</text>
  
  <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>