What is the best way to center text alongside an SVG component?

Greetings to all the problem-solving magicians out there! I've found myself in a bit of a pickle that has turned into a staring contest with VS Code. It's been quite the showdown, haha.

So here's the deal - I created a fancy website UI in Adobe XD. To add some life to my design, I exported certain elements as SVG and hopped over to HTML & CSS. Now, the issue I'm facing is with text labels inside these SVG elements. In Adobe XD, I meticulously aligned the text centrally along the horizontal axis of the shapes. But lo and behold, when I check the design in a browser, all the text seems to have taken a detour to the left, beyond the confines of my beautiful shapes. Here's an example snippet:

<svg xmlns="http://www.w3.org/2000/svg" width="172" height="239" viewBox="0 0 172 239">
  // The rest of your SVG code goes here

I scoured the depths of the internet for solutions, dabbling with text-anchor and dominant-baseline tags, but alas, no luck. Tweaking the x and y values did squat too. And don't even get me started on aligning multiline texts using <tspan>. It feels like chasing a unicorn.

htmlcsssvgadobe-xd

Answer №1

  • Ensure that text-anchor='middle' is utilized.
  • Position the x coordinate of the <text> element at the exact center of the SVG (for a width of 172, set x="86").
  • Remove the <text> element from within <g> elements with transforms.
  • Place it as the last child element within the <svg> to prevent it from being obscured by other elements.
  • Set both <tspan> x coordinates to "0".

<svg xmlns="http://www.w3.org/2000/svg" width="172" height="239" viewBox="0 0 172 239">
  <g id="Boiler-fit-tag" transform="translate(-1499 -296)">
    <g id="Group_1" data-name="Group 1" transform="translate(1499 296)">
      <g id="Rectangle_28" data-name="Rectangle 28" fill="#fff" stroke="#090808" stroke-width="3">
        <rect width="172" height="239" rx="27" stroke="none"/>
        <rect x="1.5" y="1.5" width="169" height="236" rx="25.5" fill="none"/>
      </g>
      <line id="Line_1" data-name="Line 1" x2="143.142" transform="translate(14.579 143.583)" fill="none" stroke="#707070" stroke-width="2"/>
    </g>
    <!--This line below is meant to be in the centre of the box but is running off the page to the left-->
    <g id="_002-boiler" data-name="002-boiler" transform="translate(1459.535 318.7)">
      <path id="Path_66" data-name="Path 66" d="M220.2,85.447A10.853,10.853,0,1,0,209.344,96.3,10.864,10.864,0,0,0,220.2,85.447Zm-18.868,0a8.015,8.015,0,1,1,8.015,8.014A8.024,8.024,0,0,1,201.329,85.447Z" transform="translate(-83.879 -60.484)"/>
      <path id="Path_67" data-name="Path 67" d="M253.158,112.1a1.42,1.42,0,0,0-2.006-2.006l-2.844,2.844c-1.27,1.27.707,3.306,2.006,2.006Z" transform="translate(-123.941 -88.929)"/>
      <path id="Path_68" data-name="Path 68" d="M155.886,9.51a6.47,6.47,0,0,0-4.62-6.18A93.317,93.317,0,0,0,125.464,0c-3.023,0-6.055.129-9.012.383a1.42,1.42,0,0,0,.243,2.827c2.876-.247,5.827-.372,8.769-.372a90.41,90.41,0,0,1,25,3.215,3.617,3.617,0,0,1,2.58,3.457V56.867H97.88V9.551a3.619,3.619,0,0,1,2.609-3.466c2.139-.613,4.457-1.155,6.889-1.613a1.42,1.42,0,0,0-.525-2.788c-2.518.473-4.922,1.037-7.145,1.674a6.469,6.469,0,0,0-4.665,6.194V71.545a6.47,6.47,0,0,0,4.62,6.18c1.072.314,2.448.682,4.107,1.056v3.458a4.582,4.582,0,0,0,3.288,4.414,52.87,52.87,0,0,0,6.367,1.451v7.328a1.42,1.42,0,0,0,2.837,0V88.517q1.273.158,2.677.28v6.636a1.42,1.42,0,0,0,2.837,0V88.984c1.175.055,2.4.087,3.687.087q1.858,0,3.687-.09v6.451a1.42,1.42,0,0,0,2.837,0V88.786q1.35-.119,2.677-.288v6.935a1.42,1.42,0,0,0...
</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

Updating iframe source dynamically using JavaScript results in the entire webpage refreshing

I am a long-time user of stack overflow and have always found solutions to my issues. However, I am now facing a problem that has me completely stuck, prompting me to sign up and post this question. On my index page, I have multiple iframes with dynamic c ...

javascripthtmliframe

Ways to make the picker shorter

I've encountered an issue with my Picker element - specifically, I can't seem to reduce its height. Despite trying to adjust the height property in my code snippet below, I haven't had any luck. Here is my code snippet: <View class="pag ...

ioscsstitaniumtitanium-alloypicker

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer

Issues with event firing when using the tag

I've been exploring the use tag within an svg element. I managed to get a simple example working on JSFiddle: https://jsfiddle.net/cneLLLqu/ When I click on the red square (outside of the defs and use tags), a message box pops up. However, clicking o ...

javascripthtmlsvg

Why are the height and width values I specified not matching the values returned?

I am currently learning HTML and JavaScript, specifically diving into the width() and height() methods in JavaScript. Setting the dimensions of div1 to 100px for height and 300px for width, I encountered a discrepancy when running the code. Upon execution ...

javascripthtmlcss

How can I incorporate a background image into an Angular template without using a CSS file?

Can you please provide guidance on setting a background image in Angular using the ngFor directive within a carousel grid layout? <div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" style="https://image.tmdb.org/ ...

htmlcssangular

Refresh data after modal is closed in AngularJS

-->html code <button type="button" class="btn btn-primary" ng-click="platformAppConfigurationCreate()"> <span class="fa fa-plus"></span> <span class="hidden-xs hidden-sm"> Create </span> </button> --> C ...

javascripthtmlangularjs

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

Absolute URL in CSS file doesn't seem to be functioning properly on a local machine

Response Just sharing my solution here since I couldn't answer my own question until 8 hours had passed: I managed to resolve the issue. By removing Server.MapPath from the PreRender function, I was able to render it correctly. It was just a silly m ...

c#css

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...

javascriptjqueryhtmlcssajax

Ways to extract transparency data of each pixel from a PNG uploaded by the user via the front-end

Currently, I am in need of extracting the transparency value for each individual pixel from a PNG image that is submitted by the user, directly within the front-end environment. At the moment, I have implemented a method where I prevent the form from bein ...

javascripthtmlimagepngpixel

Stop Sass from including property entirely

Within my current project, I have implemented a sass-mixin that looks something like this: mymixin.scss: @mixin customized_mixin($header-border-top-stack, $header-border-bottom-stack) { #some-id { border-top: $header-border-top-st ...

htmlcsssassmixins

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

Utilizing Boostrap to create a background image positioned on the far left of the screen within a .container

I am currently working with bootstrap 4 and have a layout that includes a container class: body #content.container .row .col-6 | Great content .col-6 | I really like it .row .col-12 And so forth .row ...

cssbootstrap-4

PHP not displaying radio button values

My latest project involved creating a quiz program using only PHP. The program consists of 4 different questions and radio buttons, and when an option is selected, the value of the radio button (A, B, C, or D) should be printed. I have set up 4 PHP varia ...

phphtmlphp-7.3

Prevent the sorting feature of angular-ui-sortable from functioning on the second div

I have set up a sortable option to arrange image positions. Now, I want to display another "div" if there are less than 5 images, where users can add new images. The issue is that the "add new image" div is nested within another div. Here is my HTML: < ...

htmlangularjsangular-uiangular-ui-sortable

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

javascripthtmlcss

What is the reason behind the continual change in the background image on this website?

Can you explain the functionality of this background image? You can find the website here: ...

javascripthtmlcss

Creating a Stylish Web Design with Bootstrap HTML - Tips for Perfecting Your Output

My code is producing the following output: https://i.sstatic.net/LVda1.png But I want to achieve this instead: https://i.sstatic.net/OUlOP.png How can I modify my code to get the desired layout? <link rel="stylesheet" href="https://cdn.jsdelivr.n ...

htmltwitter-bootstrap

Featuring my Cookie page prominently on my website's homepage

I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...

phpcookiesincludehtml