"Utilizing SVG format to manipulate text, adjusting font size within tspan elements

There seems to be an issue with the font size on SVG. Even though both the SVG and paragraph have a font-size of 16px, they appear different. I would like the font size in the SVG to match that of the paragraph.

Another concern is how to center 

<tspan text-anchor="middle" class="tc-label-value">85</tspan>
without the presence of 
<tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
. Sometimes, having "Text in SVG" causes alignment issues. More information can be found at this link.

htmlcsssvg

Answer №1

Using SVG text and span for font-size and centering

body {
  margin: 0;
}

.wr {
  width: 180px;
  margin: 0 auto;
}

.label-text {
  font-size: 12px;
  text-align: center;
}

.tc-label-value {
  font-size: 12px;
  text-align: center;
}

.par {
  font-size: 16px;
  text-align: center;
}
<div class='wr'>
  <svg viewBox="0 0 100 100" width="100%" height="100%" style="display: block;">
            <path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
            <path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
            <text transform="translate(50)" x="0" y="50">
                <tspan text-anchor="middle" class="tc-label-value">85</tspan>
                <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
            </text>
        </svg>
  <p class='par'>Text Paragraph</p>
</div>

Answer №2

The font size within the svg element needs to be set at 8.88px. This is because the svg's width is equivalent to 100 units or pixels (viewBox="0 0 100 100") and is then scaled up to 180px (.wr{width: 180px;}). In order for the font size inside the svg to visually appear as 16px, the actual font size should be calculated as 16 * 100 / 180 = 8.88

.wr {
  width: 180px; 
}
.par{
  font-size: 16px;
}

svg{font-size: 8.88px;}
<div class='wr'>
  <svg viewBox="0 0 100 100" style="display: block;">
    <path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
      <path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
    <text transform="translate(50)" x="0" y="50">
      <tspan text-anchor="middle" class="tc-label-value">85</tspan>
      <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>       
    </text>
 </svg>
  <p class='par'>Text Paragraph</p>
</div>

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

Why do I see my footer displayed twice on the page?

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li> @Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions() ...

cssajaxasp.net-mvcrazor

The design breaks occur exclusively in the Android default browser

I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...

jqueryhtmlcsscross-browser

Creating XPaths for HTML using Selenium: A step-by-step guide

What is the proper way to create an xpath expression for the following block of html? <li> <a href="/parade/storeus/browse/Home-Accents-Radios/_/N-1c7kmv"> Radios </a> </li> ...

htmlseleniumselenium-webdriverwebdriver

Display an Asterisk Icon for md-input fields with lengthy labels

Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspectiv ...

javascripthtmlcssangularjs

Transferring HTML content using jQuery AJAX and PHP

Can anyone help me with displaying the content of a division on one page to another? <div id="box-cont" class="box-content"> <?php echo $stat;// Includes multiple images and s ...

javascriptphpjqueryhtmlajax

Is there a way for me to direct to a different HTML page once I click on a certain data point?

At the moment, I have been utilizing this complete set of calendar codes. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='fullcalendar.css' rel='stylesheet' /> <link href=&a ...

javascriptjqueryhtmlfullcalendar

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

A single column in Bootstrap displaying text vertically

Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...

htmlcsstwitter-bootstrap

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

javascripthtmlajaxshopping-cartshopify

Tips on concealing the visibility of a table row using PHP

My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...

phphtmlcss

Error Handling in PHP Form with HTML and Image Upload

Let me give you some context first. Recently, I've delved into the world of php and have been at it for a few days now. My code might be a bit messy, but I've done my best to markup as much as possible. I have a form where three things are expec ...

phphtmlformsemail

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

javascripthtmljqueryapidom

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

Establishing a unique title and favicon for non-HTML files on a website

Is there a way to specify a title and favicon for non-HTML files on a website? For instance, what if I have a link like https://example.com/files/image-or-something.png. In Chrome, the default behavior is to display the URL of the file as the title, with ...

htmlnode.jsexpress

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...

javascriptjqueryhtmlcss

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. Here is the demo link: . When the second div is clicked, why does the third div slide? How can this prob ...

jquerycss

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Enhance the appearance of your Dojo TabContainer when viewing in Internet Explorer

Firefox seems to handle the following code without any issues: < div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%"> < div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%"> {% for row ...

cssinternet-explorerdojotabcontainerdijit.layout