What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it.

Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I've encountered is that every <text> aligns to the SVG itself rather than their parent <g>. With around 200 desks, manually positioning each desk number is tedious work, especially considering that the floor plan may change periodically. Am I overlooking something?

Below is a simplified example: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 453.16 313.93">
    <defs>
        <style>
        .cls-1 {
            fill: none;
            stroke: #231f20;
            stroke-miterlimit: 10;
        }
        .cls-2 {
            font-size: 30px;
            text-anchor: middle;
        }
        </style>
    </defs>
    <g>
        <path class="cls-1" d="M122.05,61.28H.5V.5H122.05V61.28Z"/>
        <text class="cls-2" x="63" y="34">001</text>
    </g>
    <g>
        <path class="cls-1" d="M122.05,145.33H.5v-60.78H122.05v60.78Z"/>
        <text class="cls-2" x="63" y="116">002</text>
    </g>
    <g>
        <path class="cls-1" d="M122.05,229.38H.5v-60.78H122.05v60.78Z"/>
        <text class="cls-2" x="63" y="200">003</text>
    </g>
    </svg>

htmlcsssvg

Answer №1

Indeed, utilizing the <g> element allows for easy manipulation of the boxes. It's evident that all the boxes share similarities, with differences only in number and the transform attribute. The <path> and <text> elements are positioned relative to the <g> container (a conceptual box measuring 120x60 units). The <path> elements have identical dimensions (as their d values remain constant), while the <text> is centrally aligned within each box using text-anchor and dominant-baseline.

<svg width="600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #231f20;
        stroke-miterlimit: 10;
        stroke-width: 2;
      }
      .cls-2 {
        font-size: 30px;
        text-anchor: middle;
        dominant-baseline: middle;
      }
    </style>
  </defs>
  <g transform="translate(5 5)">
    <path class="cls-1" d="M 0 0 H 120 V 60 H 0 Z"/>
    <text class="cls-2" x="60" y="30">001</text>
  </g>
  <g transform="translate(5 75)">
    <path class="cls-1" d="M 0 0 H 120 V 60 H 0 Z"/>
    <text class="cls-2" x="60" y="30">002</text>
  </g>
  <g transform="translate(5 145)">
    <path class="cls-1" d="M 0 0 H 120 V 60 H 0 Z"/>
    <text class="cls-2" x="60" y="30">003</text>
  </g>
</svg>

Answer №2

Utilize the transform attribute (or CSS transform if preferred) to modify the g coordinate system, enabling all children coordinates to align with this transformed system.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 453.16 313.93">
    <defs>
        <style>
        .cls-1 {
            fill: none;
            stroke: #231f20;
            stroke-miterlimit: 10;
        }
        .cls-2 {
            font-size: 30px;
            text-anchor: middle;
        }
        </style>
    </defs>
    <g>
        <path class="cls-1" d="M122.05,61.28H.5V.5H122.05V61.28Z"/>
        <text class="cls-2" x="63" y="34">001</text>
    </g>
    <g transform="translate(0, 30)">
        <path class="cls-1" d="M122.05,145.33H.5v-60.78H122.05v60.78Z"/>
        <text class="cls-2" x="63" y="116">002</text>
    </g>
    <g transform="translate(0, 60)">
        <path class="cls-1" d="M122.05,229.38H.5v-60.78H122.05v60.78Z"/>
        <text class="cls-2" x="63" y="200">003</text>
    </g>
    </svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hover over a row in one table to modify the appearance of another row in a different table

Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related? You can find a JSFiddle link illustrating what I am trying to achieve. Here is an example of the code: table#table1 #el1:hover + ta ...

htmlcss

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...

javascripthtmlseleniumselenium-webdriver

Deleting a button from a list item or array in Angular 12

Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...

javascripthtmlangulartypescript

Adjust image size based on window dimensions changes

Let me demonstrate the issue I'm facing with this demo. This demo shows a simple list of images that scrolls across the page. When you click on an image, a larger version appears above it in a lightbox style. I want the height of this larger image ...

css

Trouble with selecting a color from the picker tool

Working with HTML markup often presents challenges, especially when it comes to using a color picker on Mac OS. I find that trying to match the exact background color of a div element by picking up color from an image can be tricky. After using the Mac co ...

htmlcss

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Below is the script I am using to preview an image before it is uploaded. The HTML structure looks like this: <div> <img id="image" src="#"> </div> <input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(th ...

javascriptjqueryhtmlimage

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

Trigger responsiveness issues with Bootstrap

Currently, I find myself in a somewhat awkward situation. I have developed a website using Bootstrap 4 (with Compass as a Ruby gem). However, due to ongoing discussions about its appearance on mobile devices, the client has requested that I revert the page ...

csstwitter-bootstrapscale

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

The mobile navigation panel fails to open

I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...

jqueryhtmlcss

Finding an element's id within a click event inside an iframe

<iframe id="myiframe" src="doc.html"> <button id="btn1"></button><!-- how do I retrieve this id? --> </iframe> $('#myiframe').on('click', function () { alert(this.id); }); I am trying to make it ...

javascriptjqueryhtml

What could be causing my Javascript clock to malfunction?

I am having an issue with my clock code, which is supposed to display the date and time set 2 weeks in advance. Unfortunately, it is not working on either local or server environments. Can anyone help me troubleshoot this problem? Here is the code that I ...

javascriptjqueryhtmlclock

Is there a way to alter a form element based on the selected image?

Below is a code snippet that allows the price in the 'price' div to change based on user selection. <script type="text/javascript"> function showprice(e){ document.getElementById("price").innerHTML = e.getAttribute(&apo ...

htmlpaypalonclick

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

javascriptjqueryhtmlcssfunction

What is the rationale behind transmitting JSON data within HTML in Next.js's static site generation (

When a webpage is loading, the entire HTML document is sent, whereas in client-side routing, only the JSON file and JS chunk are sent. But why does the HTML file filled with data need to contain JSON data too? Is it really necessary since we already have ...

htmlnext.jsstatic-site-generation

hyperlink to choose a specific option from a drop-down menu

The challenge I am currently working on involves page1.html <a href="/foo"></a> foo.html <select ng-model="ctrl.listvalues"> <option id="{{item.value}}" ng-repeat="item" in ctrl.availableValues" value="{{item.value}}">item.di ...

javascriptjqueryhtmlangularjs

Prevent parent element from changing color when child element is clicked

Check out my HTML: .imageURL:active .image_submit_div { background-color: #ccc; } .image_submit_div:active { background-color: #e6e6e6; } <div class="image_div"> <label for="id_image" class="image_submit_div"> <h3>+ add ...

javascriptjquerycss